How to change the style of the dropdown element of the material-ui select component

问题

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:

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

回答1:

For Material-ui version 0

Apply styles to dropdownMenuprops as stated here Select Properties

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

Apply the style to select using dropdownmenuprops

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

SandBox Demo using version 0.18

For Material-ui Version 1

Dropdown or menu styles are overriden using MenuProps property.

Select-API

Try this

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

Apply the style to MenuProps

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

I tried this in codesandbox and it works for me

Code Sandbox Demo

Read the API of Menu and Select for more details.

回答2:

Material-UI v4

You can do that either at global level or at component level.

Global level

const theme = createMuiTheme({
    overrides: {
        // Applied to the <ul> element
        MuiMenu: {
            list: {
                backgroundColor: "#cccccc",
            },
        },
        // Applied to the <li> elements
        MuiMenuItem: {
            root: {
                fontSize: 12,
            },
        },
    },
});

Component level

First define your style:

const useStyles = makeStyles({
    select: {
        "& ul": {
            backgroundColor: "#cccccc",
        },
        "& li": {
            fontSize: 12,
        },
    },
});

Then in your component:

<Select MenuProps={{ classes: { paper: classes.select } }} />

来源：https://stackoverflow.com/questions/50353676/how-to-change-the-style-of-the-dropdown-element-of-the-material-ui-select-compon