UNPKG

3.7 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
4const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
5import { deepmerge } from '@mui/utils';
6import { generateUtilityClass } from '@mui/base';
7import { createTheme as systemCreateTheme } from '@mui/system';
8import createMixins from './createMixins';
9import createPalette from './createPalette';
10import createTypography from './createTypography';
11import shadows from './shadows';
12import createTransitions from './createTransitions';
13import zIndex from './zIndex';
14
15function createTheme(options = {}, ...args) {
16 const {
17 mixins: mixinsInput = {},
18 palette: paletteInput = {},
19 transitions: transitionsInput = {},
20 typography: typographyInput = {}
21 } = options,
22 other = _objectWithoutPropertiesLoose(options, _excluded);
23
24 if (options.vars) {
25 throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
26Please use another name.` : _formatMuiErrorMessage(18));
27 }
28
29 const palette = createPalette(paletteInput);
30 const systemTheme = systemCreateTheme(options);
31 let muiTheme = deepmerge(systemTheme, {
32 mixins: createMixins(systemTheme.breakpoints, mixinsInput),
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 transitions: createTransitions(transitionsInput),
38 zIndex: _extends({}, zIndex)
39 });
40 muiTheme = deepmerge(muiTheme, other);
41 muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
42
43 if (process.env.NODE_ENV !== 'production') {
44 const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
45
46 const traverse = (node, component) => {
47 let key; // eslint-disable-next-line guard-for-in, no-restricted-syntax
48
49 for (key in node) {
50 const child = node[key];
51
52 if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
53 if (process.env.NODE_ENV !== 'production') {
54 const stateClass = generateUtilityClass('', key);
55 console.error([`MUI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
56 root: {
57 [`&.${stateClass}`]: child
58 }
59 }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
60 } // Remove the style to prevent global conflicts.
61
62
63 node[key] = {};
64 }
65 }
66 };
67
68 Object.keys(muiTheme.components).forEach(component => {
69 const styleOverrides = muiTheme.components[component].styleOverrides;
70
71 if (styleOverrides && component.indexOf('Mui') === 0) {
72 traverse(styleOverrides, component);
73 }
74 });
75 }
76
77 return muiTheme;
78}
79
80let warnedOnce = false;
81export function createMuiTheme(...args) {
82 if (process.env.NODE_ENV !== 'production') {
83 if (!warnedOnce) {
84 warnedOnce = true;
85 console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
86 }
87 }
88
89 return createTheme(...args);
90}
91export default createTheme;
\No newline at end of file