如何让MUI TextField组件的占位符滑动到输入框外部顶部

要实现点击TextField时label滑到输入框左上角外部的效果，你需要调整label的定位、输入框内边距以及fieldset的位置，修改你的StyledTextField样式即可：

import React from "react"
import { styled } from "@mui/material/styles"
import TextField from "@mui/material/TextField"

const StyledTextField = styled(TextField)(({ width, marginTop }) => ({
  width: width || "343px",
  marginTop: marginTop || "25px",
  // 调整输入框顶部内边距，因为label不再占用内部空间
  "& .MuiOutlinedInput-root": {
    paddingTop: "16px",
    "&:focus-within fieldset": {
      borderColor: "black",
      // 调整fieldset顶部位置，避免和外部label重叠
      top: "-8px",
    },
    // 输入框有值时同样调整fieldset
    "&:not(.Mui-focused) fieldset": {
      top: "-8px",
    },
  },
  // 调整label的定位，让它移到输入框外部
  "& .MuiFormLabel-root.Mui-focused, & .MuiFormLabel-root.Mui-filled": {
    color: "black",
    transform: "translate(0, -16px) scale(0.75)",
    left: "0",
    top: "0",
  },
  // 初始状态下label的位置
  "& .MuiFormLabel-root": {
    left: "14px",
    top: "50%",
    transform: "translate(0, -50%)",
    transformOrigin: "top left",
  },
}))

const CustomTextField = ({ label, variant, helperText, value, onChange, disabled, width, marginTop }) => (
  <StyledTextField
    label={label}
    variant={variant}
    helperText={helperText}
    value={value}
    onChange={onChange}
    disabled={disabled}
    width={width}
    marginTop={marginTop}
  />
)

export default CustomTextField

关键样式说明： #

• .MuiOutlinedInput-root的paddingTop：减少顶部内边距，因为label不再占据输入框内部的顶部空间，确保输入内容不会被顶得太高。
• label的transform和定位：在聚焦或输入框有值时，通过translate和scale让label上移并缩小，同时设置left:0和top:0让它完全位于输入框的左上角外部。
• fieldset的top调整：将fieldset的顶部上移，避免边框顶部和外部的label重叠，保持视觉连贯。

这样修改后，点击输入框或者输入框有值时，label就会平滑滑到输入框的左上角外部，符合你的预期效果。

内容的提问来源于stack exchange，提问作者Hussam Ahmed