javascript - MUI Select - 更改选择大小
问题描述
在使用来自 MUI 的选择时,我正在努力让它们正确使用带有“vh”和“vw”的高度和宽度以及使用“vh”的文本大小。
我最终为这些框设置了合适的大小,但标签文本不再居中,因为显然使用了“变换”来从左上角偏移自身。
无论如何,这就是我所拥有的: https ://codesandbox.io/s/material-demo-ujz2g
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
width: "20vw"
},
selectEmpty: {
marginTop: theme.spacing(2)
},
select: {
height: "10vh"
},
inputLabel: {
fontSize: "4vh",
alignSelf: "center"
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
const handleChange = event => {
setAge(event.target.value);
};
return (
<div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
className={classes.inputLabel}
ref={inputLabel}
id="demo-simple-select-outlined-label"
>
Age
</InputLabel>
<Select
className={classes.select}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl variant="filled" className={classes.formControl}>
<InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
<Select
labelId="demo-simple-select-filled-label"
id="demo-simple-select-filled"
value={age}
onChange={handleChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
const { makeStyles, InputLabel, MenuItem, FormHelperText, FormControl, Select } = MaterialUI;
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
width: "20vw"
},
selectEmpty: {
marginTop: theme.spacing(2)
},
select: {
height: "10vh"
},
inputLabel: {
fontSize: "4vh",
alignSelf: "center"
}
}));
function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
const handleChange = event => {
setAge(event.target.value);
};
return (
<div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
className={classes.inputLabel}
ref={inputLabel}
id="demo-simple-select-outlined-label"
>
Age
</InputLabel>
<Select
className={classes.select}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl variant="filled" className={classes.formControl}>
<InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
<Select
labelId="demo-simple-select-filled-label"
id="demo-simple-select-filled"
value={age}
onChange={handleChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
ReactDOM.render(<SimpleSelect />, document.querySelector('#root'));
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@4/umd/material-ui.production.min.js"></script>
<div id="root"></div>
编辑:在放大和缩小时,奇怪的行为尤其明显 - 标签本身在下拉列表中移动。
解决方案
尝试在 FormControl 上使用 size="small" 属性
<FormControl variant="filled" size="small">
<InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
<Select
labelId="demo-simple-select-filled-label"
id="demo-simple-select-filled"
value={age}
onChange={handleChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
推荐阅读
- reactjs - 如何在reactjs中将令牌添加到标头
- java - Android MotionLayout 不在真实设备上显示动画
- salt-stack - 如何定义 cmd.run 以在状态文件中的指定 minion 上执行
- cucumber-jvm - 基于 Cucumber JVM 的测试套件作为 Spring Boot 应用程序
- javascript - 迭代对象数组并仅获取特定键以在 React js 中形成新的对象数组
- java - EditText 小部件无法正常工作,如何使其工作?
- amazon-web-services - 为 AWS API Gateway 创建 CI/CD 的最佳方式是什么?
- amazon-web-services - 拦截 AWS S3 请求
- c# - Zebra 打印机通过 USB 直接连接,是否可以在 windows 下检索打印机名称
- powershell - powershell hexedit中奇怪的字节事物显示了除用于删除bom字节的脚本之外的其他数据