Saltar al contenido
Ctrl+K

Paleta

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color

primary.main
secondary.main
error.main
warning.main
info.main
success.main
text.primary
text.secondary
text.disabled
<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

primary.main
secondary.main
error.main
warning.main
info.main
success.main
text.primary
text.secondary
text.disabled
<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

import { palette } from '@material-ui/system';
Nombre del import Prop Propiedad CSS Clave del tema
color color color palette
bgcolor bgcolor backgroundColor palette

Grid
Was this page helpful?
Posiciones
Thanks for your feedback!

Please let us know what we could do to improve this page.