我正在尝试自定义 MUISelect组件的下拉元素的设计（边框、半径边框）。
MUI 文档提到了各种属性来覆盖和设置各种子组件的样式，但没有提到下拉本身。其原因可能是下拉呈现在根组件之外，相对于页面具有绝对位置。
知道如何设置下拉菜单的样式吗？这是组件当前状态的屏幕截图：
我能够自定义 MUISelect组件的输入元素的设计
MUI Select 的下拉元素样式
IT技术
reactjs
material-ui
2021-05-11 18:03:44
3个回答
对于 Material-ui 版本 0
按照此处所述将样式应用于 dropdownMenuprops选择属性
const dropdownMenuProps={
menuStyle:{
border: "1px solid black",
borderRadius: "5%",
backgroundColor: 'lightgrey',
},
}<SelectField
multiple={true}
hintText="Overriden"
value={values}
onChange={this.handleChange}
dropDownMenuProps={dropdownMenuProps}
>
对于 Material-ui 版本 1
使用 MenuProps 属性覆盖下拉或菜单样式。
试试这个
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 中尝试过这个，它对我有用
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 } }} />
);
}
}
您可以使用MUI v5 中的sxprop来设置包含内部列表的样式，如下所示：PaperMenuItem
<Select
fullWidth
value={age}
onChange={handleChange}
MenuProps={{
PaperProps: {
sx: {
bgcolor: 'pink',
'& .MuiMenuItem-root': {
padding: 2,
},
},
},
}}
>
现场演示
