В моем приложении я хочу, чтобы цвет активной вкладки был красным, а цвет неактивной вкладки - синим.

Вот стиль:

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, и после его вызова цвет активной и неактивной вкладок меняется на красный, хотя цвет неактивной вкладки меняется на более светлый оттенок красного. Однако я хочу, чтобы цвет неактивной вкладки оставался синим.

1
Amit 10 Ноя 2020 в 11:58

1 ответ

Лучший ответ

Это можно сделать с помощью селектора &.Mui-selected.

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

источник

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

1
Mosh Feu 10 Ноя 2020 в 11:56