How to use theme colors for "color" prop used in MaterialUI components

Question

Trying to use the colors from my Mui pallete as values for color prop like so:

Example:

  <Tabs
    indicatorColor="primary.mainGradient"
  >
    <Tab />
  </Tabs>

But that doesnt work, Ive also tried using useTheme like so:

indicatorColor={theme.palette.primary.mainGradient}

That didn't work either. How can I use other colors other than primary for color props?

EDIT:

This is how I create my color in theme:

    const theme = useMemo(
      () =>
        createMuiTheme({
          palette: {
            primary: {
              main: '#4297FF',
              mainGradient: "linear-gradient(-45deg,rgba(0, 101, 251, 1) 0%,rgba(0, 185, 255, 0.9251050762101716) 100%)",
            },

Here is the error I'm getting from my console.

Failed prop type: Invalid prop `color` of value `linear-gradient(-45deg,rgba(0, 101, 251, 1) 0%,rgba(0, 185, 255, 0.9251050762101716) 100%)` supplied to `ForwardRef(TabIndicator)`, expected one of ["primary","secondary"]

Answer 1

indicatorColor only accepts 'primary' and 'secondary' values, which sets the background-color to theme.palette.primary.main and theme.palette.secondary.main respectively.

You can see the full TabIndicator API here.

To answer your question, you can add a custom style object directly to TabIndicatorProps.style like this:

<Tabs
  TabIndicatorProps={{
    style: {
      height: 5,
      background:
        "linear-gradient(-45deg,rgba(0, 101, 251, 1) 0%,rgba(0, 185, 255, 0.9251050762101716) 100%)"
    }
  }}
>

Live Demo