Paleta

Transmitir significado através da cor com um punhado de classes de utilitário de cor. Inclui suporte para links de estilo com estados de foco também.

Cor

primary.main

secondary.main

error.main

warning.main

info.main

success.main

text.primary

text.secondary

text.disabled

<Box sx={{ color: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'secondary.main' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'error.main' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'warning.main' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'info.main' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'success.main' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'text.primary' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'text.secondary' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box sx={{ color: 'text.disabled' }}>…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.secondary">…
<Box color="text.disabled">…

Cor de fundo