Material UI v5中如何为OutlinedInput分聚焦/未聚焦状态设置样式

你的写法存在两个明显问题：

1. 硬编码了MUI构建时自动生成的哈希类名css-1d3z3hw-MuiOutlinedInput-notchedOutline，这类类名会随版本、构建配置变化随机生成，稳定性极差
2. 未关联组件的聚焦状态选择器，导致样式在所有状态下强制生效，无法区分聚焦/非聚焦场景

MUI v5 为所有组件状态提供了固定的全局类名，不需要依赖随机哈希类，也不需要滥用!important，直接通过sx属性结合状态类选择器即可精准控制不同状态的样式，参考代码如下：

<OutlinedInput
  id="input-with-icon-adornment"
  endAdornment={
    <InputAdornment position="end">
      <SearchIcon />
    </InputAdornment>
  }
  fullWidth
  notched
  sx={{
    // 未聚焦默认状态边框样式
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "black",
      borderWidth: "2px",
    },
    // 聚焦状态边框样式
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "#1976d2", // 替换为你需要的聚焦态边框色
      borderWidth: "2px",
      // 可按需添加阴影、圆角等其他聚焦态样式
    },
    // 可选：补充hover状态样式
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderColor: "#666", // 替换为你需要的hover态边框色
    }
  }}
/>

补充说明 #

• MUI组件的固定状态类名统一格式为Mui[组件名]-[状态标识]，除了聚焦态Mui-focused，常用的还有禁用态Mui-disabled、错误态Mui-error等，直接使用这类固定类名即可保证样式长期稳定
• 注意选择器写法：&.Mui-focused中间没有空格，代表选中当前组件本身带有Mui-focused类的状态，后续嵌套内部边框元素的选择器优先级足够覆盖MUI默认样式，不需要加!important强制覆盖
• 如果项目中需要统一所有OutlinedInput的样式规范，推荐通过createTheme配置组件的默认样式，比逐个组件写sx更易维护

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