83 lines
2.3 KiB
JavaScript
83 lines
2.3 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/customization/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) {
|
|
if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
|
|
return {};
|
|
}
|
|
// If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
|
|
let selector = theme.getColorSchemeSelector(key);
|
|
if (selector === '&') {
|
|
return styles;
|
|
}
|
|
if (selector.includes('data-') || selector.includes('.')) {
|
|
// '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
|
|
selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
|
|
}
|
|
return {
|
|
[selector]: styles
|
|
};
|
|
}
|
|
if (theme.palette.mode === key) {
|
|
return styles;
|
|
}
|
|
return {};
|
|
} |