CODEWITHSUNDEEP
cssreactjsmaterial-uitabs
Ap-Mich
Ap-Mich

Reputation: 37

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.

Upvotes: 0

Views: 1597

Answers (2)

Nagibaba
Nagibaba

Reputation: 5408

Additionally you can customize it using theme.ts:

MuiTab: {
    styleOverrides: {
      root: ({ theme }: { theme: Theme }) => ({
        color: 'black',
        "&.Mui-selected":{
          color: 'red'
        }
      }),
    },
  },

Upvotes: 0

Soroush Salehi 404
Soroush Salehi 404

Reputation: 323

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

Upvotes: 1

Related Questions