Palette

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

Color

<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

<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';