Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
4 contributors

Users who have contributed to this file

@mnajdova @michaldudak @ZeeshanTamboli @hbjORbj
import { deepmerge } from '@mui/utils';
import {
createTheme as systemCreateTheme,
unstable_defaultSxConfig as defaultSxConfig,
unstable_styleFunctionSx as styleFunctionSx,
} from '@mui/system';
import MuiError from '@mui/utils/macros/MuiError.macro';
import generateUtilityClass from '../generateUtilityClass';
import createMixins from './createMixins';
import createPalette from './createPalette';
import createTypography from './createTypography';
import shadows from './shadows';
import createTransitions from './createTransitions';
import zIndex from './zIndex';
function createTheme(options = {}, ...args) {
const {
breakpoints: breakpointsInput,
mixins: mixinsInput = {},
spacing: spacingInput,
palette: paletteInput = {},
transitions: transitionsInput = {},
typography: typographyInput = {},
shape: shapeInput,
...other
} = options;
if (options.vars) {
throw new MuiError(
'MUI: `vars` is a private field used for CSS variables support.\n' +
'Please use another name.',
);
}
const palette = createPalette(paletteInput);
const systemTheme = systemCreateTheme(options);
let muiTheme = deepmerge(systemTheme, {
mixins: createMixins(systemTheme.breakpoints, mixinsInput),
palette,
// Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
shadows: shadows.slice(),
typography: createTypography(palette, typographyInput),
transitions: createTransitions(transitionsInput),
zIndex: { ...zIndex },
});
muiTheme = deepmerge(muiTheme, other);
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
if (process.env.NODE_ENV !== 'production') {
const stateClasses = [
'active',
'checked',
'completed',
'disabled',
'error',
'expanded',
'focused',
'focusVisible',
'required',
'selected',
];
const traverse = (node, component) => {
let key;
// eslint-disable-next-line guard-for-in, no-restricted-syntax
for (key in node) {
const child = node[key];
if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
if (process.env.NODE_ENV !== 'production') {
const stateClass = generateUtilityClass('', key);
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(
{
root: {
[`&.${stateClass}`]: child,
},
},
null,
2,
),
'',
'https://mui.com/r/state-classes-guide',
].join('\n'),
);
}
// Remove the style to prevent global conflicts.
node[key] = {};
}
}
};
Object.keys(muiTheme.components).forEach((component) => {
const styleOverrides = muiTheme.components[component].styleOverrides;
if (styleOverrides && component.indexOf('Mui') === 0) {
traverse(styleOverrides, component);
}
});
}
muiTheme.unstable_sxConfig = {
...defaultSxConfig,
...other?.unstable_sxConfig,
};
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this,
});
};
return muiTheme;
}
let warnedOnce = false;
export function createMuiTheme(...args) {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(
[
'MUI: the createMuiTheme function was renamed to createTheme.',
'',
"You should use `import { createTheme } from '@mui/material/styles'`",
].join('\n'),
);
}
}
return createTheme(...args);
}
export default createTheme;