Javascript '&&燃气轮机*'；在React&x27；s风格

我有以下代码：

const useStyles = makeStyles(theme => ({
  row: {
    '& > *': {
      fontSize: 12,
      fontWeight: 'bold',
      color: 'rgba(33,34,34,0.5)',
      letterSpacing: 0.5,
      lineHeight: '16px',
    },
  },
}));

任何人都可以向我解释这句话的含义：

'& > *': {

感谢。

是CSS中的

组合器选择作为第一个元素的直接子元素的节点

*

是CSS中的一种

选择所有元素。或者，可以将其限制为特定名称空间或所有名称空间

&

在SCSS中

在JS中的CSS中，它可能指的是当前的组件选择器

父选择器，

&

，是Sass发明的一种特殊选择器，用于嵌套选择器中引用外部选择器

由于React Material UI在其实现中使用，因此这种语法是可能的

---

因此，在上述所有组合中，

&>*

意味着：为所有当前父级的直接子级的所有元素类型应用CSS

“&>*”与“>*”相同，据我所知，并转换为：每个直接降序元素。因此，作为您要将样式应用到问题的元素的直接子元素的每个元素都是

&

必需的。

*

是否足够？我的理解是，

&

通常指的是类，并且有类。像

.parentClass{&parent2Class{…}somethingElse{…}

&

被命名为父选择器可能是不明确和令人困惑的，因为从技术上讲，它不是选择父级，而是选择正在设置样式的当前组件。Sass文档本身在“父选择器”和“外部选择器”之间切换，这一点都没有帮助，但它的意思是最外层的选择器。在JS解决方案中的CSS中，最外层的选择器不存在，因为它们以应用样式的组件为目标。因此，我认为您应该澄清

&

与当前组件匹配。在Sass/SCSS中

&>*

和

*

是等效的。我通过比较

foo{>bar{key:value；}}

和

foo{&>bar{key:value；}}

进行实验。生成的CSS在两者之间是相同的。你可以在Sass的操场上试试，比如。我还使用JS中的CSS解决方案进行了测试，它们之间没有明显的差异。