74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
|
/**
|
||
|
|
* 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
|
||
|
|
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 {};
|
||
|
|
}
|