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

Question

我想使用 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 类，但我不确定如何做到这一点。不幸的是，该手册只描述了简单按钮的样式，而不是我如何更改此类更复杂组件的样式。我希望有人能给我一个例子，我如何将轮廓、文本和箭头的颜色更改为白色。

标签： javascriptcssreactjscomponentsmaterial-ui

Answer 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选择器