add css in component material ui code example

Example 1: adding two jss style in material ui styele

// Import the utility function above ^
import combineStyles from 'path/to/combineStyles'

// Now we can import contextual styles where we need them (preferred):
import buttonStyles from '/path/to/buttonStyle';
import componentStyles from '/path/to/componentStyle';

// We can use style functions that make use of the theme (example):
const s1 = theme => ({
  toolbar: {
    backgroundColor: theme.palette.primary.main,
    color: '#fff',
    ...theme.mixins.toolbar,
  },
  link: {
    color: theme.palette.primary.main,
    width: '100%',
    textDecoration: 'none',
    padding: '12px 16px',
  },
});

// And we can use style objects (example):
const s2 = {
  menuItem: {
    height: 'auto',
    padding: 0,
  },
};

// Use our util to create a compatible function for `withStyles`:
const combinedStyles = combineStyles(s1, s2, buttonStyles, componentStyles);

// And use `withStyles` as you would normally:
export default withStyles(combinedStyles)(MyComponent);

Example 2: adding style to root material ui

  classes nesting