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.