64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { CSSObject } from '@mui/styled-engine';
|
|
export interface ApplyStyles<K extends string> {
|
|
(key: K, styles: CSSObject): CSSObject;
|
|
}
|
|
/**
|
|
* 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<K extends string>(key: K, styles: CSSObject): CSSObject;
|