material-ui 组件样式自定义 - 将选择组件的颜色更改为白色

Posted 2023-02-23

【中文标题】material-ui 组件样式自定义 - 将选择组件的颜色更改为白色

【英文标题】：material-ui component style customization – change color of select component to white

【发布时间】：2020-04-15 20:39:14

【问题描述】：

我想使用 material-ui 组件的下拉菜单（请参阅https://material-ui.com/components/selects/）。因此，我从示例中复制了特定组件：

组件

return <div>
<FormControl variant="outlined" className=classes.root>
  <InputLabel ref=inputLabel id="demo-simple-select-outlined-label">
    Plan
  </InputLabel>
  <Select
    labelId="demo-simple-select-outlined-label"
    id="demo-simple-select-outlined"
    value=age
    onChange=handleChange
    labelWidth=labelWidth

  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value=10>dsnfsdjfnsduifn</MenuItem>
    <MenuItem value=20>Twenty</MenuItem>
    <MenuItem value=30>Thirty</MenuItem>
  </Select>
</FormControl>

风格

const useStyles = makeStyles(theme => (
root: 
  margin: theme.spacing(1),
  minWidth: 120,
  color: 'white',
  borderColor: 'white'
,));

由于我的应用设计，我想将此下拉菜单的颜色更改为白色。目前该组件如下所示：

正如您在组件中看到的那样，变体被概述了。据我了解文档 (https://material-ui.com/api/select/) 我必须覆盖 .MuiSelect-outlined 类，但我不知道如何做到这一点。不幸的是，该手册只描述了简单按钮的样式，而不是我如何更改此类更复杂组件的样式。 我希望有人能给我一个例子，我如何将轮廓、文本和箭头的颜色更改为白色。

【问题讨论】：

将 className=classes.root 设置为 并重试

感谢您的回答，现在文字是白色的，但轮廓和箭头仍然是黑色的。

为 FormControl 写另一个样式

【参考方案1】：

你来了

.MuiOutlinedInput-notchedOutline 
    border-color: #fff;//for border color

 .MuiSelect-icon 
    color: #fff;// for icon drop down icon color

.MuiInputLabel-root 
    color: #fff;// for lable color

对于focus，只需在这些上添加父.Mui-focused 选择器

【讨论】：

感谢您的回答！我必须在哪里将这些行放入我的代码中？

@ling 要么你应该在全局 'style.css' 或 'component styles' 或使用 'style' 标签的组件 html 上方写下它

我已经为这个组件创建了一个自己的 CSS 文件，我通过import './TrainingPlanSelector.css'; 导入了该文件。我没有在钩子的 HTML 返回中添加任何内容。不幸的是，下拉菜单看起来仍然一样，并且 CSS 文件对样式没有任何影响。我是否必须将您给我的任何给定标签添加类名，如果是：哪个类名对应哪个标签？

@Ling TrainingPlanSelector.css 的目录结构是什么，我认为它是一个组件样式，因此您需要在每个样式之前使用/deep/ 选择器，例如/deep/ .MuiSelect-icon border-color: #fff !important; 和@987654328 @ 覆盖默认样式。

非常感谢！添加!important 标签后，边框颜色等为白色。

【参考方案2】：

const useStyles = makeStyles(theme => (
select: 
  borderColor: 'white'
,
fomrControl
  margin: theme.spacing(1),
  minWidth: 120,
  color: 'white',

));

【讨论】：

很遗憾，我给对应的组件添加了样式后，还是出现了同样的问题。

请尝试在 jsfiddle 中制作样本以进行更多测试