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

Question

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

Component

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

Answer 1

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

Answer 2

你去]

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