How to make every element inherit MUI theme properties e.g. font

0
votes

I'm using the MUI theme to style the Material UI components.

getChildContext() {
  return {
    muiTheme: getMuiTheme(Theme),
  };
}

I'd like some of the properties to affect all of the children, specifically the font.

Currently, the solution is to creating global styles with CSS, but this seems suboptimal as it's duplicating code.

1
material-ui

1 Answers

2
votes

The Material-UI theme that you put on context is only consumed by the components that read and use it.

The simplest way to makes some of those styles available to other components in the hierarchy is to use them inline in your top-level component, following the pattern you'll find in any Material-UI component.

static contextTypes = {
  muiTheme: PropTypes.object.isRequired,
};

render() {
  const styles = {
    fontFamily: this.context.muiTheme.fontFamily
  };

  return (
    <div style={styles}>
      <MyApp />
    </div>
  );
}