material-ui - 如何改变material-ui select组件下拉元素的样式

Question

我正在尝试自定义 material-ui 选择组件的下拉元素的设计(边框、半径边框)。
Material UI 文档提到了各种属性来覆盖和设置各种子组件的样式，但没有提到下拉本身。其原因可能是下拉呈现在根组件之外，相对于页面具有绝对位置。

知道如何设置下拉菜单的样式吗？
这是组件当前状态的屏幕截图:


我能够自定义 material-ui 选择组件的输入元素的设计

Answer 1

对于 Material-ui 版本 0

如此处所述，将样式应用于 dropdownMenuprops Select Properties

const dropdownMenuProps={
  menuStyle:{
    border: "1px solid black",
    borderRadius: "5%",
    backgroundColor: 'lightgrey',
  },
}

使用 dropdownmenupprops 应用样式以进行选择

<SelectField
        multiple={true}
        hintText="Overriden"
        value={values}
        onChange={this.handleChange}
        dropDownMenuProps={dropdownMenuProps}
      >
      

SandBox Demo using version 0.18

对于 Material-ui 版本 1

使用 MenuProps 属性覆盖下拉或菜单样式。

Select-API

尝试这个

const styles = theme => ({
    dropdownStyle: 
    {
      border: "1px solid black",
      borderRadius: "5%",
      backgroundColor:'lightgrey',
    },
});

将样式应用到 MenuProps

 <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: "age",
              id: "age-simple"
            }}
            MenuProps={{ classes: { paper: classes.dropdownStyle } }}
          >

我在 codeandbox 中尝试过这个，它对我有用

Code Sandbox Demo

阅读 Menu的API和 Select了解更多详情。