Material-ui: theme object is not accessable in withStyles (import { withStyles } from '@material-ui/styles')

[Kaliyani]

• [ ] This is not a v0.x issue.
• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Want to use 'theme' object in styles like below,

const styles = theme => ({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: theme.spacing.unit *7,
    [theme.breakpoints.down('sm')]:{
        height:theme.spacing.unit *10
    },
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  },
});

Current Behavior 😯

Whenever i import withStyles from @material-ui/styles, theme object is not accessable. I am getting error

TypeError: Cannot read property 'unit' of undefined

Examples 🌈

Please find my code below, if i import withStyles from @material-ui/core/styles, i am able to apply the theme as expected.

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
//import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/styles';

const styles = theme => ({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: theme.spacing.unit *7,
    [theme.breakpoints.down('sm')]:{
        height:theme.spacing.unit *10
    },
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  },
});

function ClassNames(props) {
  const { classes, children, className, ...other } = props;
  console.log(classes)

  return (
        <Button className={classNames(classes.root, className)} {...other}>
        {children || 'class names'}
        </Button>
  );
}

ClassNames.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
};

export default withStyles(styles)(ClassNames);

Context 🔦

I am trying to use withStyles from @material-ui/styles. Theme object is not accessable inside the styles block. whereas @material-ui/core/styles is working as expected.

Please help me to identify where i am missing the code here.

[joshwooding]

Do you have a Theme Provider? Either the ThemeProvider from styles or MuiThemeProvider from the core package?

[Kaliyani]

@joshwooding MuiThemProvider is not required for accessing Theme object in styles rite? without having MuiThemeProvider, i have access to theme object using core/styles packages

[joshwooding]

With @material-ui/styles If you are accessing theme in a style if I remember correctly you have to provide a theme provider

[Kaliyani]

@joshwooding Thank you so much. now i am able to access theme object .

[Akash187]

Actually, the problem occurred because of @material-ui/styles is a separate package can be used independently. So it doesn't come with the theme.

[eric-the-snake]

Just ran into the same problem.

In my case, changing import { withStyles } from '@material-ui/styles'; to import { withStyles } from '@material-ui/core/styles'; solved the issue. I guess the first package does not come with any Provider.

[7200rpm]

Just ran into the same problem.

In my case, changing import { withStyles } from '@material-ui/styles'; to import { withStyles } from '@material-ui/core/styles'; solved the issue. I guess the first package does not come with any Provider.

Unfortunately, this does not solve it for me. I can access theme when using makeStyles, but not withStyles. I am importing import { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';