How to switch between main, light and dark variances of a Material-UI Palette

Question

Assuming I am using a Material-UI palette as follows:

  palette: {
    primary: {
      main: "#039be5",
      light: "#63ccff",
      dark: "#C218006db35B",
      contrastText: "#fafafa"
    },
    secondary: {
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    },
    error: {
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    }
  },

And let's say that I am using a number of Material-UI components such as the <AppBar />, <Button />, etc. and each of them I want to give them different accents of the primary palette object - ex. <AppBar /> will be primary.main and <Button /> will be primary.light.

How can I do it?

Using something like <AppBar position="static" color="primary.light"> does not work, and throws an error.

Answer 1

Unfortunately the docs are unclear. Here is the only hacky work-around I found:

<AppBar position="static" className="primaryLight">

const styles = theme => ({
  primaryLight: {
    backgroundColor: theme.palette.primary.light
  }
}

This library is convoluted... at least it's consistent with React!