73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
/**
|
|
* A universal utility to style components with multiple color modes. Always use it from the theme object.
|
|
* It works with:
|
|
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
|
|
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
|
|
* - Zero-runtime engine
|
|
*
|
|
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
|
|
*
|
|
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
|
|
*
|
|
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
|
|
*
|
|
* @example
|
|
* 1. using with `styled`:
|
|
* ```jsx
|
|
* const Component = styled('div')(({ theme }) => [
|
|
* { background: '#e5e5e5' },
|
|
* theme.applyStyles('dark', {
|
|
* background: '#1c1c1c',
|
|
* color: '#fff',
|
|
* }),
|
|
* ]);
|
|
* ```
|
|
*
|
|
* @example
|
|
* 2. using with `sx` prop:
|
|
* ```jsx
|
|
* <Box sx={theme => [
|
|
* { background: '#e5e5e5' },
|
|
* theme.applyStyles('dark', {
|
|
* background: '#1c1c1c',
|
|
* color: '#fff',
|
|
* }),
|
|
* ]}
|
|
* />
|
|
* ```
|
|
*
|
|
* @example
|
|
* 3. theming a component:
|
|
* ```jsx
|
|
* extendTheme({
|
|
* components: {
|
|
* MuiButton: {
|
|
* styleOverrides: {
|
|
* root: ({ theme }) => [
|
|
* { background: '#e5e5e5' },
|
|
* theme.applyStyles('dark', {
|
|
* background: '#1c1c1c',
|
|
* color: '#fff',
|
|
* }),
|
|
* ],
|
|
* },
|
|
* }
|
|
* }
|
|
* })
|
|
*```
|
|
*/
|
|
export default function applyStyles(key, styles) {
|
|
// @ts-expect-error this is 'any' type
|
|
var theme = this;
|
|
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
|
|
// If CssVarsProvider is used as a provider,
|
|
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
|
|
var selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
|
|
return _defineProperty({}, selector, styles);
|
|
}
|
|
if (theme.palette.mode === key) {
|
|
return styles;
|
|
}
|
|
return {};
|
|
} |