Material UI中"&.Mui-selected"与"& .Mui-selected"的区别是什么？

在MUI使用的CSS-in-JS语法中，&是父选择器占位符，始终指向你当前正在定义样式的元素本身，两种写法的差异完全来自CSS原生的选择器规则： #

1. &.Mui-selected（无空格） #

这是多类名匹配规则，匹配同时满足两个条件的元素：

• 是你当前定义样式的元素本身
• 自身携带Mui-selected类名

举个实际场景：如果你给ListItem组件写样式，这个选择器只会在「当前ListItem自身被选中，系统自动添加了Mui-selected类」时生效，样式直接作用在ListItem本身。

2. & .Mui-selected（有空格） #

这里的空格是CSS原生的后代选择器分隔符，整个选择器的匹配逻辑是：
找到你当前定义样式的元素的所有后代元素里，携带Mui-selected类名的节点，样式只会作用在这些后代节点上，不会影响当前元素本身。

举个实际场景：如果你给List组件写样式，这个选择器会生效在List组件内部所有被选中的ListItem上，不会改变List本身的样式。

空格的具体作用 #

那个空格就是标准CSS的后代选择器标识，用来区分配对规则：

• 没有空格：要求&代表的类名和后面的Mui-selected同时出现在同一个DOM节点上
• 有空格：要求Mui-selected对应的节点是&对应节点的子孙后代

编译后的效果可以参考以下示例：

/* 假设你定义样式的元素类名为.custom-root，& = .custom-root */
/* 无空格写法编译结果 */
.custom-root.Mui-selected {
  background: #1976d2;
}
/* 有空格写法编译结果 */
.custom-root .Mui-selected {
  color: #fff;
}

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