Style the dropdown element of MUI Select - reactjs

Question

I'm trying to customize the design (borders, radius border) of the drop-down element of the MUI Select component.
The MUI 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 MUI Select component

Answer 1

Material-UI v4
You can do that in two different ways:
1. At global level
This way all the menus in the application will get the style.
First you need to create a theme.js file:
'use strict';
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
// Applied to the <ul> element
MuiMenu: {
list: {
backgroundColor: "#cccccc",
},
},
// Applied to the <li> elements
MuiMenuItem: {
root: {
fontSize: 12,
},
},
},
});
export default theme;
Then import it in your main application component, so it will be applied to all the application components:
'use strict';
import React from "react";
import { ThemeProvider } from '#material-ui/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import theme from 'theme.js';
export default class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your app content */}
</ThemeProvider>
);
}
}
2. At component level
With this approach you can define a different menu style for each component.
'use strict';
import React from "react";
import { makeStyles } from '#material-ui/core/styles';
import Select from "#material-ui/core/Select";
const useStyles = makeStyles({
select: {
"& ul": {
backgroundColor: "#cccccc",
},
"& li": {
fontSize: 12,
},
},
});
export default class MyComponent extends React.Component {
const classes = useStyles();
render() {
return (
<Select MenuProps={{ classes: { paper: classes.select } }} />
);
}
}

Answer 2

You can use the sx prop in MUI v5 to style the Paper which contains a list of MenuItem inside like this:
<Select
fullWidth
value={age}
onChange={handleChange}
MenuProps={{
PaperProps: {
sx: {
bgcolor: 'pink',
'& .MuiMenuItem-root': {
padding: 2,
},
},
},
}}
>
Live Demo

Answer 3

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.

Answer 4

For anyone still looking for this in 2022:
MenuProps={{
sx: {
'& .MuiMenu-paper': {
backgroundColor: 'dark.primary',
color: 'text.light'
},
'& .MuiMenuItem-root:hover': {
backgroundColor: 'dark.secondary',
color: 'text.white'
},
'& .Mui-selected': {
backgroundColor: 'primary.main',
color: 'text.white'
}
}
}}
sx={{
color: '#fff',
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
'.MuiSvgIcon-root': {
color: '#fff'
},
'&:before': {
borderBottom: `1px solid ${DarkTheme.palette.primary.light}`
},
'&:hover': {
':before': {
borderBottom: `1px solid ${DarkTheme.palette.primary.dark}`
}
},
'& .MuiMenuItem-root': {
backgroundColor: 'dark.primary'
},
'& .MuiMenu-paper': {
backgroundColor: 'dark.primary'
}
}}