React JS中JSS框架下CSS样式里&符号的作用是什么？

嘿，刚好我对JSS这块挺熟的，来给你掰扯清楚这个&符号的作用～

在JSS这个CSS-in-JS框架里，&的核心作用就是指代当前样式块的父选择器，和你在SCSS/Sass这类预处理器里见到的&用法几乎是一样的。

拿你给出的代码示例来说：

export const agGrid = { extend: [container], '& .ag-theme-material': { marginTop: '2rem' } };

这里的&就代表agGrid这个样式最终编译生成的类选择器（比如JSS会给它生成类似.agGrid-abc123这样的唯一类名）。当JSS把这段代码编译成普通CSS时，就会变成：

.agGrid-abc123 .ag-theme-material {
  margin-top: 2rem;
}

简单说，就是给agGrid这个类下的所有.ag-theme-material子元素设置margin-top: 2rem的样式，而且因为是基于父选择器的嵌套，还能避免样式全局污染，完美适配React组件的模块化需求。

顺便给你补充几个&的常见用法场景，方便你后续理解：

• 绑定伪类：比如写&:hover，编译后就是.agGrid-abc123:hover，给父元素设置hover状态样式
• 同级选择器：& + .another-class会编译成.agGrid-abc123 + .another-class，选中紧跟在父元素后的同级元素
• 多层嵌套中的父引用：哪怕你嵌套多层，&始终指向最外层的父选择器，比如：

  const card = {
    padding: '1rem',
    '& .title': {
      fontSize: '1.2rem',
      '&:hover': { // 这里的&指代的是.card-xxx .title
        color: 'blue'
      }
    }
  }
  

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