[英]MUI Select - Change Select size
whilst using the selects from MUI, I'm struggling to get them working properly using a height and width with 'vh' and 'vw' appropriately and a text-size using 'vh'.在使用来自 MUI 的选择时,我正在努力让它们正确使用带有“vh”和“vw”的高度和宽度以及使用“vh”的文本大小。
I end up having a proper size for the boxes, but the label text is not centered anymore due to apparently using a 'transform' to offset itself from the top left corner.我最终得到了适当大小的框,但标签文本不再居中,因为显然使用了“变换”来从左上角偏移自身。
Anyway, here's what I have: https://codesandbox.io/s/material-demo-ujz2g无论如何,这就是我所拥有的: 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>
EDIT: the odd behavior is especially visible when zooming in and out - the label itself moves within the dropdown.编辑:在放大和缩小时,奇怪的行为尤其明显 - 标签本身在下拉列表中移动。
Try using size="small" attribute on FormControl尝试在 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>
Instead of declaring FormControl
, InputLabel
and Select
manually and pass the size
props to FormControl
, you should create a selectable TextField
and change the TextField
size
props.与其手动声明
FormControl
、 InputLabel
和Select
并将size
道具传递给FormControl
,不如创建一个可选择的TextField
并更改TextField
size
道具。
It's the same as if you define a Select
and FormControl
but with better integration .这与定义
Select
和FormControl
相同,但具有更好的集成。 Here is a minimal example:这是一个最小的例子:
<TextField select size='small' {...}>
{names.map((name) => (
<MenuItem key={name} value={name}>
{name}
</MenuItem>
))}
</TextField>
You need to create a file mystyle.css
and add the following entry in it.您需要创建一个文件
mystyle.css
并在其中添加以下条目。 And finally import mystyle.css
in your demo.js
.最后在你的
demo.js
mystyle.css
.MuiInputLabel-outlined {
transform: translate(12px, 14px) scale(1) !important;
}
.MuiInputLabel-outlined.MuiInputLabel-shrink {
transform: translate(12px, -6px) scale(0.75) !important;
}
Try using style attribute on Select尝试在 Select 上使用样式属性
<Select
labelId="demo-simple-select-filled-label"
id="demo-simple-select-filled"
value={age}
onChange={handleChange}
style={{ height: 30 }}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.