Permalink
material-ui/packages/material-ui/src/styles/createTheme.js
Newer
100644
129 lines (115 sloc)
3.78 KB
Ignoring revisions in .git-blame-ignore-revs.
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';
9
import createSpacing from './createSpacing';
10
import createTransitions from './createTransitions';
13
function createTheme(options = {}, ...args) {
14
const {
15
breakpoints: breakpointsInput = {},
16
mixins: mixinsInput = {},
19
transitions: transitionsInput = {},
21
...other
22
} = options;
23
24
const palette = createPalette(paletteInput);
25
const breakpoints = createBreakpoints(breakpointsInput);
26
const spacing = createSpacing(spacingInput);
28
let muiTheme = deepmerge(
29
{
30
breakpoints,
31
direction: 'ltr',
32
mixins: createMixins(breakpoints, spacing, mixinsInput),
33
components: {}, // Inject component definitions
35
// Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
36
shadows: shadows.slice(),
37
typography: createTypography(palette, typographyInput),
38
spacing,
39
shape: { ...shape },
40
transitions: createTransitions(transitionsInput),
41
zIndex: { ...zIndex },
42
},
43
other,
44
);
45
46
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
48
if (process.env.NODE_ENV !== 'production') {
51
'checked',
52
'disabled',
53
'error',
54
'focused',
55
'focusVisible',
56
'required',
57
'expanded',
58
'selected',
59
];
61
const traverse = (node, component) => {
62
let key;
63
64
// eslint-disable-next-line guard-for-in, no-restricted-syntax
65
for (key in node) {
66
const child = node[key];
67
if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
68
if (process.env.NODE_ENV !== 'production') {
69
const pseudoClass = generateUtilityClass('', key);
72
`Material-UI: The \`${component}\` component increases ` +
73
`the CSS specificity of the \`${key}\` internal state.`,
74
'You can not override it like this: ',
75
JSON.stringify(node, null, 2),
76
'',
77
`Instead, you need to use the '&.${pseudoClass}' syntax:`,
78
JSON.stringify(
79
{
80
root: {
84
null,
85
2,
86
),
87
'',
88
'https://material-ui.com/r/pseudo-classes-guide',
89
].join('\n'),
90
);
91
}
92
// Remove the style to prevent global conflicts.
93
node[key] = {};
98
Object.keys(muiTheme.components).forEach((component) => {
99
const styleOverrides = muiTheme.components[component].styleOverrides;
101
if (styleOverrides && component.indexOf('Mui') === 0) {
102
traverse(styleOverrides, component);
110
let warnedOnce = false;
111
112
export function createMuiTheme(...args) {
113
if (process.env.NODE_ENV !== 'production') {
114
if (!warnedOnce) {
115
warnedOnce = true;
116
console.error(
117
[
118
'Material-UI: the createMuiTheme function was renamed to createTheme.',
119
'',
120
"You should use `import { createTheme } from '@material-ui/core/styles'`",
121
].join('\n'),
122
);
123
}
124
}
125
126
return createTheme(...args);
127
}
128
129
export default createTheme;