Skip to content
Permalink
Newer
Older
100644 109 lines (98 sloc) 3.35 KB
1
import { deepmerge } from '@material-ui/utils';
2
import { generateUtilityClass } from '@material-ui/unstyled';
3
import createBreakpoints from './createBreakpoints';
4
import createMixins from './createMixins';
5
import createPalette from './createPalette';
6
import createTypography from './createTypography';
7
import shadows from './shadows';
8
import shape from './shape';
9
import createSpacing from './createSpacing';
10
import { duration, easing, create, getAutoHeightDuration } from './transitions';
11
import zIndex from './zIndex';
12
13
function createMuiTheme(options = {}, ...args) {
14
const {
15
breakpoints: breakpointsInput = {},
16
mixins: mixinsInput = {},
17
palette: paletteInput = {},
18
spacing: spacingInput,
19
typography: typographyInput = {},
20
...other
21
} = options;
22
23
const palette = createPalette(paletteInput);
24
const breakpoints = createBreakpoints(breakpointsInput);
25
const spacing = createSpacing(spacingInput);
27
let muiTheme = deepmerge(
28
{
29
breakpoints,
30
direction: 'ltr',
31
mixins: createMixins(breakpoints, spacing, mixinsInput),
32
components: {}, // Inject component definitions
33
palette,
34
// Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
35
shadows: shadows.slice(),
36
typography: createTypography(palette, typographyInput),
37
spacing,
39
transitions: { duration, easing, create, getAutoHeightDuration },
41
},
42
other,
43
);
44
45
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
47
if (process.env.NODE_ENV !== 'production') {
50
'checked',
51
'disabled',
52
'error',
53
'focused',
54
'focusVisible',
55
'required',
56
'expanded',
57
'selected',
58
];
60
const traverse = (node, component) => {
61
let key;
62
63
// eslint-disable-next-line guard-for-in, no-restricted-syntax
64
for (key in node) {
65
const child = node[key];
66
if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
67
if (process.env.NODE_ENV !== 'production') {
68
const pseudoClass = generateUtilityClass('', key);
71
`Material-UI: The \`${component}\` component increases ` +
72
`the CSS specificity of the \`${key}\` internal state.`,
73
'You can not override it like this: ',
74
JSON.stringify(node, null, 2),
75
'',
76
`Instead, you need to use the '&.${pseudoClass}' syntax:`,
77
JSON.stringify(
78
{
79
root: {
80
[`&.${pseudoClass}`]: child,
83
null,
84
2,
85
),
86
'',
87
'https://material-ui.com/r/pseudo-classes-guide',
88
].join('\n'),
89
);
90
}
91
// Remove the style to prevent global conflicts.
92
node[key] = {};
97
Object.keys(muiTheme.components).forEach((component) => {
98
const styleOverrides = muiTheme.components[component].styleOverrides;
100
if (styleOverrides && component.indexOf('Mui') === 0) {
101
traverse(styleOverrides, component);
107
}
108
109
export default createMuiTheme;