为 MUI Select 的下拉元素设置样式

Question

我正在尝试自定义 MUI Select 组件的下拉元素的设计（边框、半径边框）。

MUI 文档提到了各种属性来覆盖和设置各种子组件的样式，但下拉列表本身没有。原因可能是下拉菜单从根组件渲染出来，位置相对于页面是绝对的。

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

我能够自定义 MUI Select 组件的输入元素的设计

Answer 1

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

<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

如Select Properties 所述，将样式应用于 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}
      >
      

SandBox Demo using version 0.18

适用于 Material-ui 版本 1

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

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

我在codeandbox中试过这个，它对我有用

Code Sandbox Demo

阅读Menu和Select的API了解更多详情。