Reactjs CSS空定义将类型作为特定性选择器所必需（React中的材质UI）

未选中的切换按钮的样式工作得很好

但如果未定义空的类选择器，则选定切换按钮的样式不会显示：

/App.js

import*as React from“React”；
从“react dom”导入{render}；
从“@material ui/core”导入{createStyles，WithStyles}”；
从“@material ui/lab”导入{ToggleButtonGroup，ToggleButton}”；
从“@material ui/core/styles”导入{withStyles}”；
常量样式=（）=>
创建样式({
根目录：{
背景颜色：“蓝色”，
“&$selected”：{
颜色：“蓝色”，
背景颜色：“黄色”
}
},
//这个空定义必须在这里，否则它将无法工作
所选：{}
});
导出接口IAppProps使用样式{}扩展
const-App:React.FC=（{classes}:IAppProps）=>{
返回(
选择1
);
};
const-AppWithStyles=withStyles（styles）（App）；
const rootElement=document.getElementById（“根”）；
渲染(


更新1：还尝试增加道具，如下所述：

constyles=（）=>
创建样式({
切换按钮：{
背景颜色：“蓝色”，
“&$toggleButtonSelected”：{
颜色：“蓝色”，
背景颜色：“黄色”
}
},
});
导出接口IAppProps{
课程：{
切换按钮：字符串；
toggleButtonSelected:字符串；
};
}
const-App:React.FC=（{classes}:IAppProps）=>{
// ...

没有运气


更新2：使用钩子会使类型转换变得多余，但它也不会修复此问题：

import*as React from“React”；
从“react dom”导入{render}；
从“@material ui/core”导入{createStyles，makeStyles}”；
从“@material ui/lab”导入{ToggleButtonGroup，ToggleButton}”；
const useStyles=makeStyles（（）=>
创建样式({
根目录：{
背景颜色：“蓝色”，
“&$selected”：{
颜色：“蓝色”，
背景颜色：“红色”
}
},
//这仍然需要存在。。。
//所选：{}
})
)
导出接口IAppProps{}
常量应用程序：React.FC=（）=>{
const classes=useStyles（）；
报税表（
// ...
)
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
我相信您只是误解了JSS的工作原理以及某些语法的含义。相关文档如下所示

定义styles对象（或接收主题并返回对象的函数）时，JSS将该对象中的每个键称为“规则”。关键是规则名称，JSS将把值转换为CSS类。从
useStyles
返回的
classes
对象，或者在使用
with styles
时作为道具注入的
classes
对象，然后将规则名称映射到生成的CSS类名

$ruleName
语法是一种引用样式对象中其他规则之一的CSS类名的方法。
&
引用父规则。在您的示例中，您有名为
根
和
选中的规则（当它未被注释掉时）

以下是：

root: {
        backgroundColor: "blue",
        "&$selected": {
          color: "blue",
          backgroundColor: "red"
        }
      },
selected: {}

.root-0 {
   background-color: blue;
}
.root-0.selected-0 {
   color: blue;
   background-color: red;
}

root: {
        backgroundColor: "blue",
        "&.Mui-selected": {
          color: "blue",
          backgroundColor: "red"
        }
      }

将编译为CSS，如下所示：

root: {
        backgroundColor: "blue",
        "&$selected": {
          color: "blue",
          backgroundColor: "red"
        }
      },
selected: {}

.root-0 {
   background-color: blue;
}
.root-0.selected-0 {
   color: blue;
   background-color: red;
}

root: {
        backgroundColor: "blue",
        "&.Mui-selected": {
          color: "blue",
          backgroundColor: "red"
        }
      }

通过将以下内容传递给物料UI：

          classes={{
            root: classes.root,
            selected: classes.selected
          }}
          selected={true}

您告诉它，除了应用于默认样式的类名之外，还要应用“root-0 selected-0”作为类名。如果没有空的
selected:{}
规则名，您就不能从
root
规则中引用
$selected
（如果您这样做，JSS应该在控制台中向您发出警告）

有一个稍微简单一点的替代方法（从v4开始）用于引用
选定的
类名。
选定的
是它引用为的重要UI特殊状态之一，文档为每个状态提供了默认类名（例如
Mui selected
）

这意味着您可以执行以下操作：

root: {
        backgroundColor: "blue",
        "&$selected": {
          color: "blue",
          backgroundColor: "red"
        }
      },
selected: {}

.root-0 {
   background-color: blue;
}
.root-0.selected-0 {
   color: blue;
   background-color: red;
}

root: {
        backgroundColor: "blue",
        "&.Mui-selected": {
          color: "blue",
          backgroundColor: "red"
        }
      }

这不再引用另一个规则，因此不需要
selected:{}
，也不需要
selected:classes。在
classes
prop中，selected
需要。相反，这是引用当
selected={true}
时材质UI应用于默认样式的实际类名