Material UI中sx属性自定义TextField聚焦样式失效问题

花费近10小时研究Material UI自定义样式规则，调试过程中遇到样式覆盖问题。
当前针对outlined变体的TextField组件做样式定制，目标调整标签与边框样式，原本认为使用sx属性即可完成自定义，实际效果未达预期。
核心需求：

• 输入框标签始终显示为橙色
• 输入框聚焦时边框显示为橙色
  实际表现：仅borderRadius样式设置正常生效，TextField获得焦点时，标签和边框会变回默认蓝色。检查渲染后页面元素发现，组件聚焦时默认样式优先级高于自定义样式，无法通过现有sx配置覆盖。

原有问题代码：

const One = () => (
  <div>
    <TextField
      id="outlined-basic"
      label="One"
      variant="outlined"
      sx={{
        "& .MuiOutlinedInput-root": {
          borderRadius: 0
        },

        "& .MuiInputLabel-root": {
          color: "orange"
        },

        "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
          borderColor: "orange"
        }
      }}
    />
  </div>
)

样式覆盖失败本质是CSS选择器匹配错误+优先级不足：

• MUI组件的状态类（比如.Mui-focused）是挂载在对应子组件根节点上的，并非TextField最外层节点。原有代码中"& .Mui-focused .MuiOutlinedInput-notchedOutline"的选择器路径完全错误，匹配不到聚焦状态下的边框元素
• 标签聚焦时的蓝色是MUI针对.MuiInputLabel-root.Mui-focused双类选择器设置的默认样式，优先级高于单类选择器.MuiInputLabel-root的自定义样式，聚焦时自然会被默认样式覆盖
• MUI默认样式在组件加载时就已全量注入，并非聚焦时才重新插入，只是状态类触发后匹配到了优先级更高的默认状态样式。

调整选择器路径，精准匹配状态类挂载位置，同时覆盖标签聚焦状态的颜色即可：

const One = () => (
  <div>
    <TextField
      id="outlined-basic"
      label="One"
      variant="outlined"
      sx={{
        "& .MuiOutlinedInput-root": {
          borderRadius: 0,
          // 匹配Input根节点聚焦状态下的边框
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "orange"
          }
        },
        "& .MuiInputLabel-root": {
          color: "orange",
          // 覆盖标签聚焦状态的默认蓝色
          "&.Mui-focused": {
            color: "orange"
          }
        }
      }}
    />
  </div>
)

如果需要同步修改hover状态下的边框颜色，在.MuiOutlinedInput-root下新增"&:hover .MuiOutlinedInput-notchedOutline"配置项设置颜色即可，逻辑和聚焦状态一致。

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