CODEWITHSUNDEEP
material-ui
Yatrix
Yatrix

Reputation: 13775

How can I override the selected style for a tab?

I'm trying to override the style for the selected tab, but some of the overrides don't work. I'm doing, 

const StyledTab = withStyles({
    root: {
        color: '#0071bc',
        fontWeight: '600'
    },
    selected: {
        color: '#fff' <--- doesn't work
    }
})(Tab)

which, to me, looks like what the documentation is telling me to do. If I set the background on selected, the background color changes, but the font color does not.

enter image description here

Am I doing something wrong with the override?

Edit

Using !important forces it, but I don't want to use !important if I can avoid it.

Upvotes: 0

Views: 649

Answers (1)

Nadun
Nadun

Reputation: 7853

I could come up with a solution using overriding CSS using withStyles,

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  classes={{ indicator: classes.tabsIndicator }}
>
  <Tab
   label="Search"
   icon={<PhoneIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
  <Tab
   favorites={favorites}
   label="Favorites"
   icon={<FavoriteIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
</Tabs>

If we take this as the code you can use this styles to override,

const styles = theme => ({
  tabsIndicator: {
    backgroundColor: "red"
  },
  tabRoot: {
    "&:hover": {
      color: "red",
      opacity: 1
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium
    },
    "&:focus": {
      color: "red"
    }
  },
  tabSelected: {}
});

find that tabSelected is an empty value but &$tabSelected overrides the values

here is a working sample - https://codesandbox.io/s/882o65xlyl

hope this will help you.

Upvotes: 2

Related Questions