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

问题描述

我有一个位于深色背景上的MUISelect组件，因此我只想为这一个组件更改它，以便文本和线条颜色都是白色的。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?
    },
  }}
>

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

推荐答案

您可以使用两个选项更改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

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