MUI styled函数中CSS选择器前&符号的使用时机

在MUI的styled函数里，&代表当前组件的根元素选择器，它的核心作用是明确选择器与根元素（或嵌套层级的父元素）的关联关系。什么时候必须用，什么时候可以简化，核心看你要选中的元素和当前层级元素的关系：

必须用&的场景 #

1. 选中根元素自身的状态/伪类/伪元素
   比如要给组件根元素加hover样式，必须写&:hover；如果直接写:hover，会变成选中根元素内部所有hover的后代元素，完全不是预期效果。
   示例：

   // 正确：根元素hover时变色
   '&:hover': { backgroundColor: 'gray' },
   // 错误：根元素内的后代元素hover时变色
   ':hover': { backgroundColor: 'gray' },
   

2. 选中同时拥有多个类名的根元素（或嵌套父元素）
   比如要选中同时带有Mui-focused类的根元素，必须写&.Mui-focused；如果直接写.Mui-focused，会选中根元素内部所有带这个类的后代元素。
   像你例子里的&.Mui-focused fieldset，必须带&，它表示.MuiOutlinedInput-root.Mui-focused fieldset（即同时拥有两个类的容器下的fieldset）；如果去掉&，就变成.MuiOutlinedInput-root .Mui-focused fieldset，完全匹配不到目标元素。

3. 嵌套层级中，选中父级元素自身的状态
   在嵌套的选择器里，&代表当前嵌套的父级选择器。比如你例子里的& .MuiOutlinedInput-root内部，要选中这个容器hover时的fieldset，必须写&:hover fieldset，它等价于.MuiOutlinedInput-root:hover fieldset；如果去掉&写成:hover fieldset，就变成.MuiOutlinedInput-root :hover fieldset，指的是容器内某个后代元素hover时的fieldset，逻辑完全错误（只是在你的示例结构里刚好看起来效果一致，实际场景中会出问题）。

可以不用&的场景 #

当你只是单纯选择当前层级元素的后代元素，不需要关联层级元素的状态或类名时，可以省略&。比如：

• label.Mui-focused 等价于 & label.Mui-focused，都是选中根元素下所有带Mui-focused类的label
• .MuiInput-underline:after 等价于 & .MuiInput-underline:after，都是选中根元素下.MuiInput-underline的伪元素

这时候styled会自动把当前层级的选择器作为前缀，所以两种写法效果一致。

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