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