1// Import the utility function above ^
2import combineStyles from 'path/to/combineStyles'
3
4// Now we can import contextual styles where we need them (preferred):
5import buttonStyles from '/path/to/buttonStyle';
6import componentStyles from '/path/to/componentStyle';
7
8// We can use style functions that make use of the theme (example):
9const s1 = theme => ({
10  toolbar: {
11    backgroundColor: theme.palette.primary.main,
12    color: '#fff',
13    ...theme.mixins.toolbar,
14  },
15  link: {
16    color: theme.palette.primary.main,
17    width: '100%',
18    textDecoration: 'none',
19    padding: '12px 16px',
20  },
21});
22
23// And we can use style objects (example):
24const s2 = {
25  menuItem: {
26    height: 'auto',
27    padding: 0,
28  },
29};
30
31// Use our util to create a compatible function for `withStyles`:
32const combinedStyles = combineStyles(s1, s2, buttonStyles, componentStyles);
33
34// And use `withStyles` as you would normally:
35export default withStyles(combinedStyles)(MyComponent);

1function combineStyles(...styles) {
2  return function CombineStyles(theme) {
3    const outStyles = styles.map((arg) => {
4      // Apply the "theme" object for style functions.
5      if (typeof arg === 'function') {
6        return arg(theme);
7      }
8      // Objects need no change.
9      return arg;
10    });
11
12    return outStyles.reduce((acc, val) => Object.assign(acc, val));
13  };
14}
15
16export default combineStyles;