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

Question

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

MUI 文档提到了各种属性来覆盖和设置各种子组件的样式，但下拉菜单本身没有。其原因可能是下拉菜单呈现在根组件之外，其位置相对于页面是绝对的。

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

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

原文由 Ben Carp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

}

原文由 Luca Fagioli 发布，翻译遵循 CC BY-SA 4.0 许可协议