Skip to content
Permalink
Newer
Older
100644 113 lines (104 sloc) 3.1 KB
1
import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
2
import isPlainObject from 'is-plain-object';
3
import warning from 'warning';
4
import createBreakpoints from './createBreakpoints';
5
import createMixins from './createMixins';
6
import createPalette from './createPalette';
7
import createTypography from './createTypography';
8
import shadows from './shadows';
9
import shape from './shape';
10
import createSpacing from './createSpacing';
11
import transitions from './transitions';
12
import zIndex from './zIndex';
13
14
function createMuiTheme(options = {}) {
15
const {
16
breakpoints: breakpointsInput = {},
17
mixins: mixinsInput = {},
18
palette: paletteInput = {},
19
shadows: shadowsInput,
20
spacing: spacingInput,
21
typography: typographyInput = {},
22
...other
23
} = options;
24
25
const palette = createPalette(paletteInput);
26
const breakpoints = createBreakpoints(breakpointsInput);
27
const spacing = createSpacing(spacingInput);
29
const muiTheme = {
30
breakpoints,
31
direction: 'ltr',
32
mixins: createMixins(breakpoints, spacing, mixinsInput),
33
overrides: {}, // Inject custom styles
34
palette,
35
props: {}, // Inject custom props
36
shadows: shadowsInput || shadows,
37
typography: createTypography(palette, typographyInput),
39
...deepmerge(
40
{
43
zIndex,
44
},
45
other,
46
{
47
isMergeableObject: isPlainObject,
48
},
52
if (process.env.NODE_ENV !== 'production') {
53
const pseudoClasses = [
54
'checked',
55
'disabled',
56
'error',
57
'focused',
58
'focusVisible',
59
'required',
60
'expanded',
61
'selected',
62
];
63
const traverse = (node, parentKey, depth = 1) => {
64
let key;
65
66
// eslint-disable-next-line guard-for-in, no-restricted-syntax
67
for (key in node) {
68
const child = node[key];
69
if (depth === 1) {
70
if (key.indexOf('Mui') === 0 && child) {
71
traverse(child, key, depth + 1);
72
}
73
} else if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
74
warning(
75
false,
76
[
77
`Material-UI: the \`${parentKey}\` component increases ` +
78
`the CSS specificity of the \`${key}\` internal state.`,
79
'You can not override it like this: ',
80
JSON.stringify(node, null, 2),
81
'',
82
'Instead, you need to use the $ruleName syntax:',
83
JSON.stringify(
84
{
85
root: {
86
[`&$${key}`]: child,
87
},
88
},
89
null,
90
2,
91
),
92
'',
93
'https://material-ui.com/r/pseudo-classes-guide',
94
].join('\n'),
95
);
96
// Remove the style to prevent global conflicts.
97
node[key] = {};
98
}
99
}
100
};
101
102
traverse(muiTheme.overrides);
105
warning(
106
muiTheme.shadows.length === 25,
107
'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.',
108
);
109
110
return muiTheme;
111
}
112
113
export default createMuiTheme;