如何更改材质UI输入下划线颜色？

Question

我在深色背景上有一个Material UI 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键使用类重写。

<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

Answer 2

如果目标只是为了强调下划线（以及文本），那么有一个非常简单的解决方案，它也可以与许多其他组件（comments: null，<Input>等）一起使用：< / p>

<TextField>

它将抓住下划线并将其变为白色。

有关更改的详细信息，以防您想覆盖其中的元素：https://material-ui.com/customization/palette/#dark-mode

（如果您以前从未使用过主题，则需要导入const theme = createMuiTheme({ palette: { type: 'dark', }, }); 并将组件包装在其中；请参见https://material-ui.com/customization/theming/）