Question

在使用从Material-UI进行的本机选择时，如果使用深色主题，则选择下拉列表在白色背景上具有白色文本。

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

是否可以在不更改实际选择的背景色的情况下更改下拉背景色？

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

Answer 1

有明显东西应该固定在包中。

但是，我发现，它使用本地<option>标记时只happends。这段代码来自他们有问题的演示：

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

因此，您有两个选择：

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

可以在材料的用户界面，与倒置的情况下，它们在另一演示中使用效果很好使用其他组件。（使用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-ui demo 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 native className={classes.select}>

这是使用此示例的修改版：

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

2 个答案: