如何更改material-ui选择组件的下拉元素的样式 [英] How to change the style of the dropdown element of the material-ui select component

问题描述

我正在尝试自定义material-ui选择组件的下拉元素的设计(边界，半径边框). Material UI文档提到了各种属性来替代和设置各种子组件的样式，但下拉菜单本身没有.其原因可能是下拉菜单从根组件中渲染出来，并且相对于页面的位置是绝对的.

I'm trying to customize the design (borders, radius border) of the drop-down element of the material-ui select component. The Material UI documentation mentions various properties to override and style the various sub-components, but none for the drop-down itself. The reason for it might be that the drop down renders out of the root component, with position absolute relative to the page.

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

Any idea how I can style the dropdown? Here is a screenshot of the current state of the component:

我能够自定义material-ui选择组件

I was able to customize the design of the input element of the material-ui select component

推荐答案

对于Material-ui版本0

按如下所述将样式应用于dropdownMenuprops 选择属性

Apply styles to dropdownMenuprops as stated here Select Properties

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

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

Apply the style to select using dropdownmenuprops

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

使用0.18版的SandBox演示

对于Material-ui版本1

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

Dropdown or menu styles are overriden using MenuProps property.

选择API

尝试一下

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

将样式应用于MenuProps

Apply the style to MenuProps

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

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

I tried this in codesandbox and it works for me

代码沙箱演示

阅读菜单和

Read the API of Menu and Select for more details.

这篇关于如何更改material-ui选择组件的下拉元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！