如何更改 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

在 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">

现场演示

Answer 2

如果目标只是翻转下划线（以及文本），有一个非常简单的解决方案，它也适用于许多其他组件（<Input>、<TextField> 等）：

const theme = createMuiTheme({
    palette: {
      type: 'dark',
    },
  });

它会捕捉下划线并将其变为白色。

如果您想覆盖其中的元素，有关这将发生什么变化的详细信息：https://material-ui.com/customization/palette/#dark-mode

（如果您以前从未使用过主题，则需要导入 createMuiTheme 并将您的组件包装在其中；请参阅 https://material-ui.com/customization/theming/）

Answer 3

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

1.用类覆盖

使用input Props 创建一个<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