Palette

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

Color

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

export default function Color() {
  return (
    <Typography component="div" variant="body1">
      <Box color="primary.main">primary.main</Box>
      <Box color="secondary.main">secondary.main</Box>
      <Box color="error.main">error.main</Box>
      <Box color="text.primary">text.primary</Box>
      <Box color="text.secondary">text.secondary</Box>
      <Box color="text.disabled">text.disabled</Box>
      <Box color="text.hint">text.hint</Box>
    </Typography>
  );
}

<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">…

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">…

API

import { palette } from '@material-ui/system';

Import name	Prop	CSS property	Theme key
color	color	color	palette
bgcolor	bgcolor	backgroundColor	palette