如何通过Material UI主题全局修改仅Outlined Select的边框样式？

嘿，我明白你遇到的困扰了——想单独修改Outlined变体Select的边框颜色，又不想影响其他输入框对吧？你的原配置没生效是因为$notchedOutline是MuiOutlinedInput的局部样式类，在MuiSelect的root里直接引用无法正确关联到对应的元素结构。

这里给你两个可行的解决方案，都能精准只针对Outlined类型的Select：

方案一：通过MuiSelect的outlined类限定样式 #

直接在MuiSelect的outlined变体下，针对内部的MuiOutlinedInput-notchedOutline类设置样式，这样只会作用于Select组件的Outlined版本：

overrides: {
  MuiButton: {
    outlined: {
      '&:hover': { boxShadow: 'none' },
    },
    contained: {
      '&:hover': { boxShadow: 'none' },
    }
  },
  MuiSelect: {
    outlined: {
      // 默认状态的边框颜色
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'red',
      },
      // hover状态的边框颜色（可选）
      '&:hover .MuiOutlinedInput-notchedOutline': {
        borderColor: 'darkred',
      },
      // 聚焦状态的边框颜色（可选）
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'darkred',
      }
    }
  }
}

方案二：利用Material-UI的类名嵌套（更贴合主题系统） #

如果你习惯用局部类名引用，可以结合MuiOutlinedInput的样式，但通过MuiSelect-outlined类来限定范围：

overrides: {
  MuiButton: {
    outlined: {
      '&:hover': { boxShadow: 'none' },
    },
    contained: {
      '&:hover': { boxShadow: 'none' },
    }
  },
  MuiOutlinedInput: {
    notchedOutline: {
      '.MuiSelect-outlined &': {
        borderColor: 'red',
      },
      '.MuiSelect-outlined:hover &': {
        borderColor: 'darkred',
      },
      '.MuiSelect-outlined.Mui-focused &': {
        borderColor: 'darkred',
      }
    }
  }
}

这两种方式都能避免影响其他类型的输入框，精准定位到Outlined变体的Select组件。

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