使用原生 Select 时，有两个主要元素在起作用： anInput和 native <select>。这Input是您需要更改下划线的内容，但对于本机 Select 将inputProps传递给本机select而不是Input. Input在这种情况下，您可以通过input属性自定义，然后将其与underline类一起提供。您在聚焦时尝试更改的背景颜色用于 ，select以便可以直接在classes属性中传递。

以下是 Select 的样式和代码以及您的沙箱的更新版本。在我的示例中，我为不同状态的下划线使用了三种不同的颜色，因此您可以轻松看到效果，但您可以将所有/任何这些颜色更改为您喜欢的绿色阴影。

const styles = {
  focused: {},
  disabled: {},
  error: {},
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  underlineInput: {
    "&:before": {
      // normal
      borderBottom: "1px solid #00ff00"
    },
    "&:after": {
      // focused
      borderBottom: `2px solid #ff0000`
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      // hover
      borderBottom: `2px solid #0000ff`
    }
  }
};

          <Select
            native
            classes={{ select: classes.select }}
            value={this.state.age}
            onChange={this.handleChange("age")}
            input={
              <Input
                classes={{
                  root: classes.inputRoot,
                  focused: classes.focused,
                  disabled: classes.disabled,
                  error: classes.error,
                  underline: classes.underlineInput
                }}
              />
            }
            inputProps={{
              name: "age",
              id: "age-native-simple"
            }}
          >
            <option value="" disabled />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>

首先，“选择”材料 UI 组件仅接受根、选择、填充、轮廓、选择菜单、禁用和图标，如文档中所述，其类属性上没有“聚焦”和“下划线”。

其次，您可以按照您想要的方式编写自定义 CSS 并将其注入适当的类，例如，将焦点选择背景设为白色：

改变课程

classes: {
            root: classes.inputRoot,
            select: classes.inputFocused
          }

改变CSS

  inputFocused: {
    "&:focus": {
    backgroundColor: "white"}
  },

希望能帮助到你