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>