Skip to content

🎉 v5 beta is out! Head to the v5 documentation to get started.

Palette

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 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="text.primary"><Box color="text.secondary"><Box color="text.disabled">

Background color

primary.main
secondary.main
error.main
warning.main
info.main
success.main
text.primary
text.secondary
text.disabled
<Box bgcolor="primary.main"><Box bgcolor="secondary.main"><Box bgcolor="error.main"><Box bgcolor="warning.main"><Box bgcolor="info.main"><Box bgcolor="success.main"><Box bgcolor="text.primary"><Box bgcolor="text.secondary"><Box bgcolor="text.disabled">

API

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