80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = applyStyles;
|
|
/**
|
|
* 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',
|
|
* }),
|
|
* ],
|
|
* },
|
|
* }
|
|
* }
|
|
* })
|
|
*```
|
|
*/
|
|
function applyStyles(key, styles) {
|
|
// @ts-expect-error this is 'any' type
|
|
const theme = this;
|
|
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
|
|
// If CssVarsProvider is used as a provider,
|
|
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
|
|
const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
|
|
return {
|
|
[selector]: styles
|
|
};
|
|
}
|
|
if (theme.palette.mode === key) {
|
|
return styles;
|
|
}
|
|
return {};
|
|
} |