如何自定义MUI Select组件点击聚焦后的默认边框颜色

问题原因 #

样式不生效的核心是CSS选择器层级书写错误：

• 原选择器& .Mui-focused .MuiOutlinedInput-notchedOutline中，&代表Select组件的根DOM节点，Mui-focused是组件聚焦时直接挂载在根节点上的状态类，不是根节点的后代元素，因此&和.Mui-focused之间不能加空格
• 实际DOM结构中，.MuiOutlinedInput-notchedOutline是根节点的直接后代元素，并不是.Mui-focused类元素的子节点，原选择器的层级匹配关系完全不成立，因此样式无法命中。

正确实现代码 #

修正选择器后即可实现点击聚焦时显示#404040灰色边框，完整代码片段如下：

<Box sx={{ minWidth: 120 }}>
  <FormControl>
    <Select
      id="demo-simple-select"
      value={age}
      onChange={handleChange}
      sx={{
        minWidth: "300px",
        height: "30px",
        "& .MuiSelect-select": {
          padding: "0.2rem"
        },
        // 修正后的选择器：&紧跟.Mui-focused代表根节点处于聚焦状态
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
          borderColor: "#404040",
          // 若需要修改边框粗细可在此添加 borderWidth: "1px" 等属性
        },
        // 可选：同步修改hover状态下的边框颜色，保持交互一致
        "&:hover .MuiOutlinedInput-notchedOutline": {
          borderColor: "#404040"
        }
      }}
    >
      {/* 自行填充Select.Option选项内容 */}
    </Select>
  </FormControl>
</Box>

注意：如果修改后仍有样式优先级问题，可给borderColor属性加上!important标记强制生效，写法为borderColor: "#404040 !important"

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