css - 如何更改 MUI 输入下划线颜色？

Question

我有一个深色背景上的 MUI Select 组件，因此我只想对这一个组件进行更改，以便文本和线条颜色均为白色。 Select 实例的其余部分应保持不变。

虽然我可以让文本和图标改变颜色，但我似乎无法弄清楚如何使用 classes 属性来设置下划线颜色。我的尝试似乎也使打开的图标也换行到下一行。这是一个演示问题的示例:

我的风格是这样的:

const styles = theme => ({
  underline: {
    borderBottom: '2px solid white',
    '&:after': {
      // The MUI source seems to use this but it doesn't work
      borderBottom: '2px solid white',
    },
  }
};

然后我这样设置:

<Select
  classes={{
    underline: classes.underline,     // Does it go here?
  }}
  inputProps={{
    classes: {
      underline: classes.underline,   // Or does it go here?
    },
  }}
>

此方法对文本有效(上面未显示，但在链接的示例中)，它只是我无法更改的下划线颜色。我错过了什么？

Answer 1

您可以更改 Select 的下划线颜色使用两个选项的组件

<强>1。用类覆盖

创建一个 <Input />元素使用 input使用 underline 使用类的 Prop 和覆盖键。

<Select
            value={this.state.age}
            onChange={this.handleChange}
            input={<Input classes={{
              underline: classes.underline,
            }}
             name="age" id="age-helper" />}>

我在你的沙盒中应用了这个，看看这个 here

<强>2。使用 MuiThemeProvider

const theme = createMuiTheme({
  palette: {
    primary: green,
  },
});

并使用 <MuiThemeProvider/> 应用主题

我已经在这个沙盒中应用了这两个

Customising Select