35 lines
1.1 KiB
Markdown
35 lines
1.1 KiB
Markdown
# Material UI theming: reference snippets
|
||
|
||
## Custom theme property (TypeScript)
|
||
|
||
After adding a key in `createTheme`, augment both `Theme` and `ThemeOptions`:
|
||
|
||
```ts
|
||
declare module '@mui/material/styles' {
|
||
interface Theme {
|
||
status: { danger: string };
|
||
}
|
||
interface ThemeOptions {
|
||
status?: { danger?: string };
|
||
}
|
||
}
|
||
```
|
||
|
||
Source pattern: [Theming—Custom variables](https://mui.com/material-ui/customization/theming.md#custom-variables).
|
||
|
||
## Extra `shape` keys (TypeScript)
|
||
|
||
New shape properties require augmenting `Shape` and `ShapeOptions`. See [Shape—TypeScript](https://mui.com/material-ui/customization/shape.md#typescript).
|
||
|
||
## `theme.vars` typings (CSS variables)
|
||
|
||
Typings for `theme.vars` are not enabled by default. Follow [CSS theme variables—TypeScript](https://mui.com/material-ui/customization/css-theme-variables/usage.md#typescript).
|
||
|
||
## Fallback when rendering outside `ThemeProvider`
|
||
|
||
```js
|
||
backgroundColor: (theme.vars || theme).palette.primary.main;
|
||
```
|
||
|
||
Use when a component might run outside the provider. From [CSS theme variables—Usage](https://mui.com/material-ui/customization/css-theme-variables/usage.md).
|