Material-UI：在 Windows 浏览器上使用深色主题时的本机选择在白色背景上有白色文本

Question

当使用来自 Material-UI 的 Native Select 时，如果您使用深色主题，则选择下拉菜单会在白色背景上显示白色文本。

在暗模式下也可以在组件演示页面上看到：

你能在不改变实际选择背景颜色的情况下改变下拉背景颜色吗？

编辑：这已被记录为问题：https://github.com/mui-org/material-ui/issues/14337

Answer 1

这显然应该在包中修复。

但是，我发现只有在使用原生 <option> 标签时才会发生这种情况。这段代码如果来自他们的有问题的演示：

          <Select
            native
            value={this.state.age}
            onChange={this.handleChange('age')}
            inputProps={{
              name: 'age',
              id: 'age-native-simple',
            }}
          >
            <option value="" />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>

所以你有两个选择：

1. 您可以使用 css 设置 option 的样式，并将 background 或 fontcolor 覆盖为任何您想要的样式。

2. 您可以在 material-ui 中使用另一个组件，该组件可以很好地处理倒置情况，他们在另一个演示中使用了该组件。 （使用MenuItem），像这样：

         <Select
           multiple
           value={this.state.name}
           onChange={this.handleChange}
           input={<Input id="select-multiple-checkbox" />}
           renderValue={selected => selected.join(', ')}
           MenuProps={MenuProps}
         >
           {names.map(name => (
             <MenuItem key={name} value={name}>
               <ListItemText primary={name} />
             </MenuItem>
           ))}
         </Select>
   

观看完整示例here。 （取自material-uidemo page）

Answer 2

更新自 3.9.2 版起，此问题已在 Material-UI 中修复，因此不再需要以下解决方法。

这可能应该在 Material-UI 中修复，但您可以在特定用例中通过以下方式修复它：

使用主题指定选项背景颜色（见How to change select box option background color?）：

const styles = theme => ({
  select: {
    "& option": {
      background: theme.palette.background.paper
    }
  }
});

然后在 select 上使用那个类：

  <Select native className={classes.select}>

这是使用此演示的修改版本：