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

Question

我尝试自定义material-ui select组件的下拉元素的设计（边框，半径边框）。 Material UI文档提到了各种属性来覆盖和设置各种子组件的样式，但下拉列表本身没有。原因可能是下拉列表呈现出根组件，其位置相对于页面是绝对的。

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

我能够自定义材料-ui选择组件

的输入元素的设计

Answer 1

Material-UI v4

您可以在全局级别或组件级别中进行操作。

全球水平

首先创建一个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>
        );
    }
}

组件级别

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

对于Material-ui版本0

将样式应用于dropdownMenuprops，如Select Properties

所述

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 使用dropdownmenuprops

应用样式进行选择

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; SandBox Demo using version 0.18

对于Material-ui版本1

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

Select-API

试试这个

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

将样式应用于MenuProps

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在codesandbox中尝试了这个，它适用于我

Code Sandbox Demo

阅读Menu和Select的API以获取更多详细信息。