如何更改material-ui选择组件的下拉元素的样式

Question

我正在尝试自定义material-ui选择组件的下拉元素的设计（边界，半径边框）。Material UI文档提到了各种属性来替代和设置各种子组件的样式，但下拉菜单本身没有。原因可能是下拉菜单从根组件中渲染出来，相对于页面的位置是绝对的。

知道如何为下拉菜单设置样式吗？这是该组件当前状态的屏幕截图：

我能够自定义material-ui select组件的输入元素的设计

Answer 1

您可以使用Material UI v5sx中的 prop来设置包含内部列表的样式，如下所示：PaperMenuItem

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

现场演示

Answer 2

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

}

Answer 3

对于Material-ui版本0

如此处所述，将样式应用于dropdownMenuprops 选择属性

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

应用样式以使用dropdownmenuprops选择

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

使用0.18版的SandBox演示

对于Material-ui版本1

使用MenuProps属性覆盖下拉菜单或菜单样式。

选择API

尝试这个

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

将样式应用于MenuProps

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

我在codesandbox中尝试了它，对我有用

代码沙箱演示

阅读菜单的API 并选择更多信息。

Answer 4

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