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;