Permalink
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?
material-ui/packages/mui-material/src/styles/createTheme.js /
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
144 lines (128 sloc)
4.07 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |