Search code examples
cssreactjsmaterial-uitabs

Material UI tab selected has different color than the rest of tabs

New to Material UI so hopefully this question makes sense. I am using Material UI Tabs and have been able to customize the css as per need. see below:

Tab

I have an issue where the selected tab and the other tabs have different opacity(?) even though they are the same color. Cannot find any material UI documentation online to make them uniform, I tried several things [TabIndicatorProps] or even adding below to the Tabs class

"&.Mui-selected": {
      color: "1D4659",
      opacity: "70%"
    }

Does anyone know how to fix this? I can change either the selected tab or the Other tabs. I just want to make sure they are uniform.

Solution

  • you can override MuiTab-root instead of Mui-selected.

    1- declare your custom style

    const useStyles = makeStyles({
  customTabs: {
    "& .MuiTab-root": {
      color: "#1D4659",
      opacity: "70%"
    }
  }
});

    2- use your custom style in <Tabs>

         const classes = useStyles();

     <Tabs
        classes={{ root: classes.customTabs }}
        ...
      >
       <Tab ... />
       <Tab ... />
       <Tab ... />
       <Tab ... />
       <Tab ... />
    </Tabs>

    here is the code: https://codesandbox.io/s/gracious-framework-xo1cp?file=/src/App.js