Css 如何在材质ui中设置ToggleButon样式

我正在尝试设置ToggleButton的样式，以在选中时覆盖默认颜色。但它不起作用

const useStyles = makeStyles((theme) => ({   
  toggleButtonSelected: {
      "background-color": "red"
  }
}))

.......
<ToggleButtonGroup exclusive>
    <ToggleButton
        classes={{ selected: classes.toggleButtonSelected }}
        value="a" >
        Button A
    </ToggleButton>
    <ToggleButton
        classes={{ selected: classes.toggleButtonSelected }}
        value="b">
        Button B
    </ToggleButton>
</ToggleButtonGroup>

const useStyles=makeStyles（（主题）=>（{
toggleButtonSelected：{
“背景色”：“红色”
}
}))
.......
按钮A
按钮B

解决方案 尝试将

makeStyles

样式更改为以下内容：

const useStyles = makeStyles((theme) => ({
  toggleButtonSelected: {
    "&.MuiToggleButton-root": {
      "background-color": "red"
    }
  }
}));

解释

原始的

makeStyles

样式设置不起作用，因为它生成了一个CSS规则，选择器为

。makeStyles-toggleButtonSelected-1

（在上面的屏幕截图中以红色圈出），该规则被另一个更高的规则覆盖

使用新的

makeStyles

样式，它会生成一个CSS规则，其中选择器的选择性比原始样式更高（下面用红色圈起来）。此新样式可以成功覆盖默认样式

---

完美。。行得通。。谢谢你@AnsonH。。