材料-UI v4

您可以通过两种不同的方式来实现：

1.在全球一级

这样，应用程序中的所有菜单都将获得该样式。
首先，您需要创建一个theme.js文件：

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

然后将其导入到您的主应用程序组件中，这样它就会应用到所有的应用程序组件：

'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.在组件级别

使用此方法，可以为每个组件定义不同的菜单样式。

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

}

适用于材质-ui版本0

按此处所述将样式应用于下拉菜单菜单项选择属性

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

适用于材料-ui版本1

使用MenuProps特性替代下拉菜单或菜单样式。
Select-API
试试这个

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

将样式应用于菜单属性

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

我在codesandbox中试过这个，它对我很有效
Code Sandbox Demo
阅读Menu和Select的API了解更多详细信息。

您可以使用MUI v5中的sx属性来设置Paper的样式，其中包含MenuItem列表，如下所示：

<Select
  fullWidth
  value={age}
  onChange={handleChange}
  MenuProps={{
    PaperProps: {
      sx: {
        bgcolor: 'pink',
        '& .MuiMenuItem-root': {
          padding: 2,
        },
      },
    },
  }}
>

现场演示

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