Skip to content

Palette

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

Color

<Box color="primary.main"><Box color="secondary.main"><Box color="error.main"><Box color="text.primary"><Box color="text.secondary"><Box color="text.disabled"><Box color="text.hint">
primary.main
secondary.main
error.main
text.primary
text.secondary
text.disabled
text.hint

Background color

<Box bgcolor="primary.main"><Box bgcolor="secondary.main"><Box bgcolor="error.main"><Box bgcolor="text.primary"><Box bgcolor="text.secondary"><Box bgcolor="text.disabled"><Box bgcolor="text.hint">
primary.main
secondary.main
error.main
text.primary
text.secondary
text.disabled
text.hint

API

import { palette } from '@material-ui/system';
Import name Prop CSS property Theme key
color color color palette
bgcolor bgcolor backgroundColor palette