[英]How to make select label always appear at top in MUI?
I want to create a material ui selector that label always appear at top.我想创建一个 label 始终出现在顶部的材质 ui 选择器。 I added placeholder to select component.
我在 select 组件中添加了占位符。 Here is what I want to do.
这就是我想要做的。
When not focusing to select component or at the beginning, it looks like this.Label overlaps the place holder.当不关注 select 组件或开头时,它看起来像这样。Label 与占位符重叠。
What I want to create select label always seem at the top and not overlaps the placeholder.我想要创建的 select label 总是出现在顶部,而不是与占位符重叠。
Here is the code at codesandbox这是codesandbox的代码
import * as React from "react"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import Select from "@mui/material/Select"; import InputLabel from "@mui/material/InputLabel"; const names = ["Oliver Hansen", "Van Henry", "April Tucker", "Ralph Hubbard"]; export default function MultipleSelectPlaceholder() { const [personName, setPersonName] = React.useState(null); const handleChange = (event) => { setPersonName(event.target.value); }; return ( <div> <FormControl sx={{ m: 1, width: 300, mt: 3 }}> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" label="Age" displayEmpty value={personName} onChange={handleChange} renderValue={(selected) => { if (selected === null) { return <em>Please Choose Name</em>; } return selected; }} > <MenuItem value={null}> <em>Clear</em> </MenuItem> {names.map((name) => ( <MenuItem key={name} value={name}> {name} </MenuItem> ))} </Select> </FormControl> </div> ); }
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>
https://codesandbox.io/s/multipleselectplaceholder-material-demo-forked-t06gm?file=/demo.js https://codesandbox.io/s/multipleselectplaceholder-material-demo-forked-t06gm?file=/demo.js
Just add to Select:只需添加到 Select:
notched={true} // Makes space between lines
and to InputLabel:并输入标签:
shrink={true} // Keeps label at top
For this purpose, you can simply pass shrink prop to the InputLabel
component为此,您可以简单地将收缩道具传递给
InputLabel
组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.