如何修改Material UI Select组件的下划线颜色？

我来帮你搞定这个问题！你遇到的核心问题是Material UI的Select组件下划线有多个状态（默认、聚焦、hover），默认样式的优先级比你自定义的更高，而且类名的应用位置也需要调整，同时图标换行大概率是因为把underline类错误地加到了Select本身而非内部的Input组件上。

正确的样式配置 #

首先，我们需要覆盖Input组件下划线的所有关键状态，确保自定义样式的优先级足够：

const styles = theme => ({
  // 设置Select的文本颜色
  selectText: {
    color: 'white',
  },
  // 设置下拉图标的颜色
  selectIcon: {
    color: 'white',
  },
  // 自定义下划线样式，覆盖所有状态
  customUnderline: {
    // 默认状态的下划线
    '&:before': {
      borderBottomColor: 'white',
    },
    // 聚焦状态的下划线
    '&:after': {
      borderBottomColor: 'white',
    },
    // hover状态的下划线（排除禁用、聚焦、错误状态）
    '&:hover:not($disabled):not($focused):not($error):before': {
      borderBottomColor: 'white',
    },
  },
  // 以下三个类是为了匹配MUI默认的选择器结构，提升样式优先级
  disabled: {},
  focused: {},
  error: {},
});

组件的正确使用方式 #

要把样式类应用到正确的层级上：Select本身负责文本和图标，内部的Input负责下划线。同时不要把underline类加到Select的classes属性里，否则会破坏布局导致图标换行：

<Select
  // 设置文本和图标的样式类
  classes={{
    root: classes.selectText,
    icon: classes.selectIcon,
  }}
  // 通过inputProps把下划线样式传递给内部的Input组件
  inputProps={{
    classes: {
      underline: classes.customUnderline,
      disabled: classes.disabled,
      focused: classes.focused,
      error: classes.error,
    },
  }}
>
  {/* 你的选项内容 */}
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

为什么这样有效？ #

1. 样式优先级匹配：MUI默认的下划线样式使用了复杂的选择器（比如结合:hover和组件状态类），我们通过完全匹配这些选择器结构，确保自定义样式能覆盖默认样式。
2. 正确的组件层级：下划线是由Select内部的Input组件渲染的，所以必须通过inputProps.classes把样式传递给Input，而不是直接加到Select本身上，这样就不会破坏布局导致图标换行。
3. 覆盖所有状态：我们同时处理了默认、聚焦、hover三种状态的下划线颜色，确保在任何交互下都显示白色线条。

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