Question 296626 in Html Question posted in
Some basic documentation can be found here.

Html – Change inactive tab color – Material UI Tabs

How do i change the color of the inactive tabs for Material UI tabs?

See in screenshot that they are black.

enter image description here

Thanks

Tags:

2

Answers


  1. 0

    I hard coded the values with ridiculous colors but the example is sound — You need to use the sx={{ }} in conjunction with style={{ }} You can use your theme constants in place of my hard coded values .. I would have gone further .. But, this is why We don’t use images of code

    <Tabs
    value={value}
    orientation={"horizontal"}
    onChange={handleTabChange}
    aria-label="zak example tabs"
    TabIndicatorProps={{
      style: {
        backgroundColor: "#0000FF",
      },
    }}
    sx={{
      color: "#FF0000",
      "& button:hover": { background: "#00FF00", color: "#FFF" },
      "& button.Mui-selected": { background: "#FF0000", color: "#FFF" },
    }}
    textColor="primary"
    indicatorColor="secondary"
  >
    <Tab label="Website Traffic" {...a11yProps(0)} />
    <Tab label="Website Metrics" {...a11yProps(1)} />
    <Tab label="Performance Scores" {...a11yProps(2)} />
  </Tabs>
    Login or Signup to reply.
  2. 0

    The textColor of Tabs is taken from theme.palette.text.
    You can update theme like this.

    palette: {
    primary: {
      main: '#000',
    },
    secondary: {
      main: '#F00',
    },
    text: {
      primary: '#FFF',
    },
},

<Tabs
      ...
      textColor="primary" // pallette.text.primary
      indicatorColor="secondary" // pallete.secondary.main
>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search