如何让选择标签始终出现在MUI的顶部？

Question

我想创建一个材质 ui 选择器，标签始终显示在顶部。我添加了占位符来选择组件。这就是我想做的。

当不聚焦选择组件时或在开始时，它看起来像这样。标签与占位符重叠。

我想要创建的选择标签始终显示在顶部并且不与占位符重叠。

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

只需添加到选择：

notched={true} // Makes space between lines

和输入标签：

shrink={true} // Keeps label at top