Material-ui: Is there a way to access theme inside a component?

[ilyador]

If I use withTheme is there a way to do something like that:
<Grid container spacing={(theme.spacing.unit * 3)}>{list}</Grid>

For now I see theme is passed only to a custom themes object which I can only use for CSS styling

[sakulstra]

Why shouldn't this work? When using withTheme you should get the whole theme as props.theme if i get the docs right.

https://material-ui-next.com/customization/themes/#accessing-the-theme-in-a-component

[ilyador]

Oh! I didn't know theme is being passed as a prop, all works fine now.

[yanickrochon]

In version 1.4.0, theme is not passed as a prop when using the annotation :

@withTheme({ ... })
class CustomComponent extends Component {
  render() {
    const {
      theme,
      ....
    } = this.props;

    console.log(theme);  // undefined !

    return (
      ....
    );
  }
}

CustomComponent.propTypes = {
  theme: PropTypes.object.isRequired,   // ERROR! Failed prop
};

(Edit : typo, renamed withStyles to withTheme)

[yanickrochon]

I have tried @withStyles({ ... }, { withTheme: true }) but it still doesn't work, the theme is there, but the prop types still throws a warning.

[seta-tuha]

Could you please check that the MuiThemeProvider is on top of the parent component?

[yanickrochon]

I have figured that, when using withStyles or withTheme in annotation, the wrapper is executed after the component constructor. So, the CustomComponent.propTypes are checked before the annotations set the property unto the instance. It is a problem with React that should check for these props when the component is mounted, not when it is created.

[ppaul]

Indeed, these solutions do not work. In our project we had this code in the root component:

 ReactDOM.render(
        <Provider store={store}>
            <MuiThemeProvider theme={theme}>
                <CssBaseline>
...

and from there, we used withStyles for all the components. What worked for me was to do this as well for the component.

[theshashiverma]

https://stackoverflow.com/a/60599662/10268122

[lifeeric]

@material-ui/core - v4.1+

we'll be using the useTheme() hook in our component to get the theme property:

import { useTheme } from "@material-ui/core/styles";

const default () => {
   // Hook here
   const theme = useTheme();

  return (
      <Divider style={{ background: theme.palette.divider }} />
  );
}

https://stackoverflow.com/questions/43281020/reference-to-themes-primary-color-instead-of-a-specific-color-in-material-ui/63058508#63058508

[lifeeric]

withTheme HOC

For use in class or function components:

import { withTheme } from '@material-ui/core/styles';

function DeepChildRaw(props) {
  return <span>{`spacing ${props.theme.spacing}`}</span>;
}

const DeepChild = withTheme(DeepChildRaw);

useTheme hook

import { useTheme } from '@material-ui/core/styles';

function DeepChildRaw(props) {
  const theme = useTheme()
  return <span>{`spacing ${theme.spacing}`}</span>;
}

const DeepChild = withTheme(DeepChildRaw);

Upvote answer
https://stackoverflow.com/questions/43281020/reference-to-themes-primary-color-instead-of-a-specific-color-in-material-ui/63058508#63058508