css - Material-UI How to set minWidth and maxWidth of MenuItem (popover) according to the width of the select component
问题描述
The width of the popover, to be precise. No matter how long the text of menu item is, I want the width of the popover always the same as the select component. Set the autoWidth to true or false is not helping.
following are code for the select component:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
}));
function SimpleSelect() {
const classes = useStyles();
const [values, setValues] = React.useState({
age: '',
});
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
function handleChange(event) {
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value,
}));
}
return (
<form className={classes.root} autoComplete="off">
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
Age
</InputLabel>
<Select
value={values.age}
onChange={handleChange}
input={<OutlinedInput labelWidth={labelWidth} name="age" id="outlined-age-simple" />}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
export default SimpleSelect;
How can I achive this?
解决方案
您可以通过在菜单项上设置与表单控件的宽度相同的显式宽度来实现此目的。
下面是一个例子:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MuiMenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const selectWidth = 150;
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
width: selectWidth
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
const useMenuItemStyles = makeStyles(theme => ({
menuItem: {
width: selectWidth
}
}));
function MenuItem(props) {
const classes = useMenuItemStyles(props);
return <MuiMenuItem className={classes.menuItem} {...props} />;
}
function SimpleSelect() {
const classes = useStyles();
const [values, setValues] = React.useState({
age: ""
});
function handleChange(event) {
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
value={values.age}
onChange={handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
export default SimpleSelect;
如果您希望Select
根据最宽菜单项的宽度动态调整宽度,则解决方案要复杂得多。
推荐阅读
- flutter - 在颤振中使用 Navigator.pop 时如何处理当前页面
- javascript - HTML画布射击游戏:在我点击的地方没有射击,移动播放器时没有链接
- redis - 是否有可以在 Redis 数据库中复制的 SQL 中的任何 SCN(系统更改编号)?
- javascript - 如何在单击角度8中的文本时调用函数
- ibm-midrange - 如何使用宏将 OpenOffice Calc 中的单元格值输入 AS400 文本字段/屏幕?
- binance - 如何防止 ThreadedWebsocketManager(binance python api)出现 asyncio.exceptions.TimeoutError?
- android - RuntimeException : 在应用购买中调用 BillingClient 函数时
- javascript - Angular - 从外部 JS 库(Bambora 支付网关)调用函数
- iis - 已提交的内存(提交限制)未反映
- playwright - playwright._impl._api_types.Error: Host system is missing dependencies??