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

11
votes

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:

enter image description here I was able to customize the design of the input element of the material-ui select component

2
material-ui
The best idea is to read the source codes instead of their documents, the docs are good but codes are way more clear. – Marson Mao
I suggest to clone the whole repository and set the commit to your package version, then you should easily find how to customize the style object. – Marson Mao
Reading the source code is a good idea. Forking and changing the repository for something like this, not so much. – moto

2 Answers

19
votes

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

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

16
votes

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

}