如何实现MUI Select组件标签始终固定在顶部不遮挡占位符

解决方法 #

你遇到的重叠问题是因为MUI的InputLabel默认仅在控件有有效值、或处于聚焦状态时才会收缩上浮到顶部。你初始值设为null，未聚焦时组件判定当前无输入值，标签就会停在输入框中间位置，和你通过renderValue自定义渲染的占位符重叠。

只需要给InputLabel添加shrink属性，强制标签始终保持收缩上浮状态即可解决问题，修改后的代码如下：

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 }}>
        {/* 这里添加shrink属性 */}
        <InputLabel shrink 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>
  );
}

如果你不想全局强制标签收缩，也可以通过判断personName的值来动态控制shrink属性的状态，比如shrink={personName !== null}，可以按需调整。

内容的提问来源于stack exchange，提问作者Mehmet Can BOZ