React-如何在“选择材质”用户界面中自定义下拉菜单

Question

我遇到了Material UI中的Select组件问题，该问题以不同的方式在Windows而不是Mac上以chrome呈现。

在Mac上，它工作正常，但在Windows中看到附加的图片

请注意，如果我删除了native标志，它将正常工作，但是我喜欢它的呈现器作为本机选择的方式

这是codeSandbox上的示例

https://codesandbox.io/s/yvq524yv8z

这是代码示例

const styles = theme => ({
  dropdownStyle: {
    backgroundColor: "lightgray" --> this change I need to make 
  }
});


<Select
          native
          value={value}
          onChange={this.handleChange("value")}
          name="value"
          variant="filled"
          classes={{
            root: classes.selectEmpty,
            select: classes.select
          }}
          MenuProps={{ classes: { paper: classes.dropdownStyle } }}
        >
          {contracts.map((contractItem, index) => {
            return (
              <option key={contractItem.agent_id} value={index}>
                {contractItem.carrier}
              </option>
            );
          })}
        </Select>

Answer 1

您必须覆盖<option>的backgroundColor：https://codesandbox.io/s/509n6o1v1l

您可以查看实现以查看需要覆盖的CSS规则：https://github.com/mui-org/material-ui/blob/10b9d6aef53d20ba4e368f40c9acbb7b05c5c855/packages/material-ui/src/NativeSelect/NativeSelect.js#L48-L50