在 Material UI 中更改非活动选项卡颜色的颜色

Question

在我的应用程序中，我想将活动选项卡的颜色保持为红色，将非活动选项卡的颜色保持为蓝色。

样式如下：

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

这里是渲染函数：

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

如您所见，我使用classes.newStyle 调用样式，在调用它之后，活动和非活动选项卡的颜色都变为红色，尽管非活动选项卡的颜色变为较浅的红色阴影。但是，我希望非活动标签的颜色保持为蓝色。

Answer 1

可以使用&.Mui-selected 选择器来完成。

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

source

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