[styles] How to merge multiple styles?

Material-ui uses the classes object to pass custom styles to component. withStyles helps us process theming and merging our customizations with the top level styles. Material-ui uses common classnames such as root in multiple components. This is how I understand it.

Often we have multiple components on a page and I don’t understand what the best way is to use withStyles in this context if I for instance want to adjust the root style for multiple components?

• [x ] This is a v1.x issue (v0.x is no longer maintained).
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Would it be possible to comment on the strategy that you suggest we use for this case and possibly add documentation?

Current Behavior

There is no documentation on this topic.

Your Environment

Tech	Version
Material-UI	v1.0.0
React	16.3

[dlochrie]

I made a utility to make this a lot easier:

function combineStyles(...styles) {
  return function CombineStyles(theme) {
    const outStyles = styles.map((arg) => {
      // Apply the "theme" object for style functions.
      if (typeof arg === 'function') {
        return arg(theme);
      }
      // Objects need no change.
      return arg;
    });

    return outStyles.reduce((acc, val) => Object.assign(acc, val));
  };
}

export default combineStyles;

And I use like this:

// 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);

Unless I’m mistaken, I would have thought withStyles would have already worked with multiple styles out of the box, but if not, it would be cool to see an official wrapper like the one above.

[whitneyit]

I recently ran into this problem when using withStyles, I was able to get around it with the following

  withStyles(
    (theme) => ({
      ...globalStyles(theme),
      ...tableStyles(theme),
    }),
    { withTheme: true },
  ),