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 |