如何在 material-ui 中设置 ToggleButon 的样式

问题描述

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

copying MANIFEST.in -> mypkg-0.0.1
copying setup.py -> mypkg-0.0.1
copying mypkg\main.py -> mypkg-0.0.1\mypkg
copying mypkg\__init__.py -> mypkg-0.0.1\mypkg
copying mypkg.egg-info\PKG-INFO -> mypkg-0.0.1\mypkg.egg-info
copying mypkg.egg-info\SOURCES.txt -> mypkg-0.0.1\mypkg.egg-info
copying mypkg.egg-info\dependency_links.txt -> mypkg-0.0.1\mypkg.egg-info
copying mypkg.egg-info\top_level.txt -> mypkg-0.0.1\mypkg.egg-info
copying mypkg\files\somewhat.csv -> mypkg-0.0.1\mypkg\files

解决方法

解决方案

尝试将您的 makeStyles 样式更改为以下内容：

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

说明

您原来的 makeStyles 样式不起作用，因为它生成了一个带有 .makeStyles-toggleButtonSelected-1 选择器的 CSS 规则（在上面的屏幕截图中以红色圈出），它被另一个具有更高 {{3} 的规则覆盖}.

使用我们新的 makeStyles 样式，它会生成一个 CSS 规则，其中选择器的选择性高于原始样式（下图中红色圈出）。这种新样式可以成功覆盖默认样式。

specificity