Search code examples
javascripthtmlcssreactjsmaterial-ui

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

Solution

  • 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>