MUI中'&.className'与'& .className'选择器差异咨询

这两个选择器本质是CSS基础选择器的逻辑区别，结合MUI Select组件的结构来看：

• & .Mui-disabled（带空格）：这是后代选择器，匹配的是当前组件（Select）的子/后代元素中带有Mui-disabled类的节点。比如你设置的color和WebkitTextFillColor，是用来修改Select内部显示选中值的文本颜色——这个文本容器是Select的子元素，当组件禁用时它会被加上Mui-disabled类，所以这个选择器能精准命中它。

• &.Mui-disabled（无空格）：这是多类选择器，匹配的是当前组件自身同时拥有默认类（比如MUI的MuiSelect-root）和Mui-disabled类的情况。你设置的&:before和&:after是Select组件自身的伪元素（用来模拟下划线、焦点状态线），这些伪元素属于组件本身，所以必须用这个选择器才能命中被禁用状态下的组件伪元素。

为什么嵌套在第一种选择器下无效？ #

如果把&:before/&:after嵌套在& .Mui-disabled里，最终生成的CSS会是.你的组件类 .Mui-disabled:before，意思是“选中组件后代中带Mui-disabled类的元素的before伪元素”，但实际上before/after是属于Select组件本身的，不是后代元素的，自然匹配不到目标节点，所以没有效果。

内容的提问来源于stack exchange，提问作者Richardson