47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
|
# Palette
|
||
|
|
|
||
|
|
<p class="description">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
|
||
|
|
|
||
|
|
## Color
|
||
|
|
|
||
|
|
{{"demo": "Color.js", "defaultCodeOpen": false}}
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ color: 'primary.main' }}>…
|
||
|
|
<Box sx={{ color: 'secondary.main' }}>…
|
||
|
|
<Box sx={{ color: 'error.main' }}>…
|
||
|
|
<Box sx={{ color: 'warning.main' }}>…
|
||
|
|
<Box sx={{ color: 'info.main' }}>…
|
||
|
|
<Box sx={{ color: 'success.main' }}>…
|
||
|
|
<Box sx={{ color: 'text.primary' }}>…
|
||
|
|
<Box sx={{ color: 'text.secondary' }}>…
|
||
|
|
<Box sx={{ color: 'text.disabled' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
## Background color
|
||
|
|
|
||
|
|
{{"demo": "BackgroundColor.js", "defaultCodeOpen": false}}
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ bgcolor: 'primary.main' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'secondary.main' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'error.main' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'warning.main' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'info.main' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'success.main' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'text.primary' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'text.secondary' }}>…
|
||
|
|
<Box sx={{ bgcolor: 'text.disabled' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { palette } from '@mui/system';
|
||
|
|
```
|
||
|
|
|
||
|
|
| Import name | Prop | CSS property | Theme key |
|
||
|
|
| :---------- | :-------- | :---------------- | :--------------------------------------------------------------------------- |
|
||
|
|
| `color` | `color` | `color` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
|
||
|
|
| `bgcolor` | `bgcolor` | `backgroundColor` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
|