如何更改 MUI 输入下划线颜色？

IT技术 css reactjs material-ui
2021-04-20 20:53:27

我有一个Select在深色背景上的 MUI组件，因此对于这个组件，我想对其进行更改，以便文本和线条颜色全部为白色。其余Select实例应保持不变。

虽然我可以让文本和图标改变颜色，但我似乎无法弄清楚如何使用classesprops来设置下划线颜色。我的尝试似乎也使打开的图标也换行到下一行。这是一个演示问题的示例：

编辑材料演示

我已经这样设置我的风格：

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

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

3个回答

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

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/>

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

自定义选择

是的，您可以使用classesHOC 组件提供的 prop进行覆盖withStyles。参考这里material-ui.com/customization/overrides
2021-05-31 20:53:27
在您的播放框中，单击输入后，我无法更改标签的颜色。你知道怎么做吗？
2021-05-31 20:53:27
有人可以帮我将焦点边框自定义为粉红色，将标签自定义为粉红色吗？Codesandbox.io/s/material-demo-ecj1k
2021-06-12 20:53:27
没有createMuiTheme和没有这可能MuiThemeProvider吗？
2021-06-16 20:53:27

在MUI v5 中，您可以使用sxprops。以下是具有自定义下划线颜色的 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">

现场演示

代码沙盒演示

如果目标仅仅是把下划线（和文本以及），有一个非常简单的解决方案，这也与许多其他组件（<Input>，<TextField>，等）：

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

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

有关这将更改的详细信息，如果您想覆盖它的元素：https : //material-ui.com/customization/palette/#dark-mode

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

其它你可能感兴趣的问题
上一篇在不更改 URL 的情况下响应路由器 下一篇如何隐藏 componentWillMount 警告