设置MUI Select的DropDown元素的样式 [英] Style the dropdown element of MUI Select

问题描述

我正在尝试自定义MUISelect组件的下拉元素的设计(边框、半径边框)。

MUI文档提到了覆盖各种子组件并设置其样式的各种属性，但没有提到下拉列表本身的属性。其原因可能是下拉列表呈现在根组件之外，位置是相对于页面的绝对位置。

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

我能够自定义MUISelect组件的输入元素的设计

推荐答案

对于Material-UI版本0

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

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

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

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

我在codesandbox中尝试过，它对我有效

Code Sandbox Demo

请阅读Menu和Select的接口了解更多详情。

这篇关于设置MUI Select的DropDown元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！