CODEWITHSUNDEEP
cssreactjsmaterial-ui
Amit
Amit

Reputation: 111

Changing the color of the Inactive Tab Color in Material UI

In my application, I want to keep the color of the active tab as red and the color of the inactive tab as blue.

Here is the styling:

newStyle: {
    backgroundColor: 'red',
    '&$selected': {
        backgroundColor: 'blue'
    },
}

And here is the render function:

<Tabs
    variant="fullWidth"
    value={this.state.value}
    onChange={(event, newValue) => {
        this.setState({ value: newValue })
    }}
    aria-label="simple tabs example">
    {
        this.props.devices.map((device, itr) => {
            let alertsCount = this.props.alerts ? this.props.alerts.count ? this.props.alerts.count[device.id] : 0 : 0
            return <Tab className = {classes.newStyle} label={<Badge variant="dot" badgeContent={alertsCount} color="secondary">{device.machineName}</Badge>} {...a11yProps(itr)} />
        })
    }
</Tabs>

As you can see, I'm calling the style using classes.newStyle and after calling it the color of both the active and inactive tab changes to red although the color of the inactive tab changes to lighter shade of red. However, I want the color of the inactive tab to remain as blue.

Upvotes: 3

Views: 5798

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29277

It can be done by using the &.Mui-selected selector.

tab: {
  background: 'green',
  '&.Mui-selected': {
    background: 'red'
  }
},

source

https://codesandbox.io/s/material-demo-forked-n2cxl

Upvotes: 4

Related Questions