Reputation: 26518

Style the dropdown element of Material UI Select

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

Upvotes: 31

Answers (4)

NearHuscarl

Reputation: 81290

You can use the sx prop in Material UI 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

Upvotes: 47

Thrallix

Reputation: 731

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

Upvotes: 7

Luca Fagioli

Reputation: 13349

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 } }} />
        );
    }

}

Upvotes: 28

shiva

Reputation: 3941

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.

Upvotes: 21