在MUI的makeStyles样式配置中，'& > *'语法的含义是什么？

解答 #

你看到的& > *不是普通属性名，是Material-UI v4 所使用的 JSS（CSS-in-JS 实现方案）的嵌套选择器语法，具体含义拆分如下：

• & 是当前选择器的占位符：你这段代码里它写在card样式规则内部，编译后会被替换成card类最终生成的CSS类名，比如类似.makeStyles-card-123
• > 是CSS标准的直接子元素选择器，仅匹配父元素的第一层子元素，不会匹配更深层级的后代元素
• * 是CSS通配符，匹配所有类型的DOM元素

合起来& > *编译后会生成对应CSS规则：.makeStyles-card-123 > *，作用是给所有应用了card类的元素的直接子元素，统一设置flexGrow: 1、flexBasis: 50%的弹性布局属性。

等效的原生CSS写法参考：

/* 这里的.card对应你代码里的card类生成的最终类名 */
.card {
  max-width: 475px;
}
.card > * {
  flex-grow: 1;
  flex-basis: 50%;
}
/* 后续的响应式断点规则同理 */

补充常见的同类用法参考，你之后碰到类似写法也可以对应理解：

• &:hover：匹配当前元素的鼠标悬浮状态
• & .active：匹配当前元素内部所有类名为active的后代元素
• & + .sibling：匹配当前元素相邻的下一个类名为sibling的同级元素

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