Material UI的sx属性使用的是哪种CSS方言？

你在Material UI文档中找到的代码片段：

<FormControl
  sx={{
    "& > :not(style)": { m: 1 },
    maxWidth: "100%",
    minWidth: "100%",
  }}
>

你提到的&确实不属于原生CSS，Material UI的sx属性底层基于Emotion这个CSS-in-JS库，使用的是Emotion扩展的CSS语法（属于CSS超集）。

• &在这里的作用和Sass等预处理器里的父选择器一致，代表当前组件对应的CSS选择器本身，用来实现嵌套选择器的写法，让样式结构更清晰。比如代码里的& > :not(style)就是选中当前FormControl组件下所有非<style>标签的直接子元素，给它们设置margin: 1（m是Material UI主题里的margin简写属性）。
• 除了&这种嵌套语法，sx还支持Emotion的其他特性，比如主题变量引用、简写属性、媒体查询嵌套等，这些都是对原生CSS的扩展。

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