如何使 select label 始終出現在 MUI 的頂部？

Question

我想創建一個 label 始終出現在頂部的材質 ui 選擇器。 我在 select 組件中添加了占位符。 這就是我想要做的。

當不關注 select 組件或開頭時，它看起來像這樣。Label 與占位符重疊。

我想要創建的 select label 總是出現在頂部，而不是與占位符重疊。

這是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>

Answer 1

https://codesandbox.io/s/multipleselectplaceholder-material-demo-forked-t06gm?file=/demo.js

只需添加到 Select：

notched={true} // Makes space between lines

並輸入標簽：

shrink={true} // Keeps label at top

Answer 2

為此，您可以簡單地將收縮道具傳遞給InputLabel組件