CODEWITHSUNDEEP
material-ui
skoleosho97
skoleosho97

Reputation: 293

How to fill MaterialUI tabs with a given color?

In the customized tabs section, the docs give an example of how to inject your own CSS to the frameworks components, and I want to utilize this but I am unsure how. I'd like for my active tabs to be filled with a set color altogether, instead of there simply being an underline under an active tab. Does anybody know how I would do this?

Upvotes: 0

Views: 428

Answers (2)

MaxAlex
MaxAlex

Reputation: 3319

The example below does hides the indicator and fills the Tab with the selected color:

import React from "react";
import ReactDOM from "react-dom";
import { AppBar, Tabs, Tab, makeStyles } from "@material-ui/core";

const useStyle = makeStyles(theme => ({
  indicator: {
    backgroundColor: "transparent", 
  },
  selected: {
    background: theme.palette.secondary.main,
  },
}));

function App() {
  const [value, setValue] = React.useState(0);
  const classes = useStyle();
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <React.Fragment>
      <AppBar position="static">
        <Tabs
          classes={{
            indicator: classes.indicator
          }}
          value={value}
          onChange={handleChange}
        >
          <Tab label="Item One" classes={{ selected: classes.selected }} />
          <Tab label="Item Two" classes={{ selected: classes.selected }} />
          <Tab label="Item Three" classes={{ selected: classes.selected }} />
        </Tabs>
      </AppBar>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Upvotes: 1

Kishore Kumar
Kishore Kumar

Reputation: 184

To my understanding, you want to change the background color of the selected (active) tab it can be done with css class itself

enter image description here

you can give your respective background color there is an css class which is getting applied based on the selected tab

.Mui-selected {
   background : limegreen;
}

Incase that css is not getting applied , you can override the css

.Mui-selected {
   background : limegreen !important;
}

Hope this answer solves your need. Incase any other needed, post that as comment, will try to answer for that

Upvotes: 1

Related Questions