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

Question

我有一个Select在深色背景上的材质UI 组件,所以对于这个组件我想要更改它,以便文本和线条颜色都是白色.其余的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使用两个选项更改Component 的下划线颜色

1.覆盖课程

<Input />使用inputProps 创建元素并使用underlinekey 使用类重写.

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

我在你的沙盒中应用了这个并在这里看一下

2.使用 MuiThemeProvider

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

并使用主题应用 <MuiThemeProvider/>

我已在这个沙箱中应用了这两个

自定义选择

Answer 2

在MUI v5中，您可以使用该sx属性。以下是具有自定义下划线颜色的 3 个不同组件的示例：

<Input
  sx={{
    ':before': { borderBottomColor: 'red' },
    // underline when selected
    ':after': { borderBottomColor: 'red' },
  }}
/>

<TextField
  variant="standard"
  sx={{
    '& .MuiInput-underline:before': { borderBottomColor: 'orange' },
    '& .MuiInput-underline:after': { borderBottomColor: 'orange' },
  }}
/>

<Select
  variant="standard"
  sx={{
    ':before': { borderBottomColor: 'purple' },
    ':after': { borderBottomColor: 'purple' },
  }}
>

另一种选择是styled()：

const options = {
  shouldForwardProps: (prop) => prop !== 'underlineColor',
};
const StyledSelect = styled(
  Select,
  options,
)(({ underlineColor }) => ({
  ':before, :after': {
    borderBottomColor: underlineColor,
  },
}));

<StyledSelect variant="standard" underlineColor="green">

现场演示