how to combine styles in 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: create a common style material ui style

const styles = (theme) => ({
  cardContainer: {
    position: 'relative',
    width: '50%',
    padding: theme.spacing.unit / 2,
  },
  cardOuter: {
    height: '100%',
    width: '100%',
    textAlign: 'start',
  },
  card: {
    width: '100%',
    background: theme.palette.backgrounds.card.off,
  },
  cardOn: {
    background: theme.palette.backgrounds.card.on,
  },
  cardUnavailable: {
    background: theme.palette.backgrounds.card.disabled,
  },
  cardContent: {
    display: 'flex',
    flexWrap: 'wrap',
    minHeight: 98,
    height: 98,
    [theme.breakpoints.down('sm')]: {
      minHeight: 74,
      height: 74,
    },
    padding: `${theme.spacing.unit * 1.5}px !important`,
  },
});

export default styles;