如何更改Material UI输入的下划线颜色? [英] How to change Material UI input underline colour?

问题描述

我有一个在深色背景上的Material UI Select组件，因此我只想对此组件进行更改，以使文本和线条颜色均为白色.其余的Select实例应保持不变.

I have a Material UI Select component that is on a dark background, so for just this one component I'd like to change it so that the text and line colours are all white. The rest of the Select instances should remain unchanged.

虽然我可以获取文本和图标来更改颜色，但似乎无法弄清楚如何使用classes道具设置下划线颜色.我的尝试似乎也使打开的图标也绕到了下一行.这是一个演示问题的示例:

While I can get the text and icon to change colour, I can't seem to figure out how to use the classes prop to set the underline colour. My attempts also seem to make the open icon wrap to the next line too. Here's an example demonstrating the problem:

我的风格设置如下:

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?
    },
  }}
>

此方法确实适用于文本(上面未显示，但在链接的示例中)，只是我无法更改的下划线颜色.我想念什么?

This method does work for the text (not shown above, but in the linked example), it's just the underline colour that I can't get to change. What am I missing?

推荐答案

您可以使用两个选项

1.用类覆盖

使用input道具创建<Input />元素，并使用underline键使用类重写.

Create a <Input /> element using input Props and override using classes using underline key.

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

我在您的沙箱中应用了此内容，并在此处

I applied this in your sandbox and take a look at this here

2.使用MuiThemeProvider

2. Using MuiThemeProvider

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

并使用<MuiThemeProvider/>

我在此沙箱中都应用了

自定义选择

这篇关于如何更改Material UI输入的下划线颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！