New Custom Styles (classes) and Theme variable in Class Body

mui_custom_styles_class_component.jsx

import { Box } from "@material-ui/core"
import { withStyles } from "@material-ui/core/styles"

const styles = theme => ({
  myCustomClass: {
    color: theme.palette.tertiary.dark
  }
})

class myComponent extends Component {
  render() {
    const { classes, theme } = this.props
    // A component decorated with withStyles(styles) gets a special `classes` prop injected,
    // Also we have passed  `{ withTheme: true }` option to have the theme variable in class body

    return <Box className={classes.myCustomClass} padding={theme.spacing(4)} />
  }
}

export default withStyles(styles, { withTheme: true })(myComponent)
// if you have other HOCs:
// export default withStyles(styles, { withTheme: true })(
//   withRouter(connect(mapStateToProps)(myComponent))
// )