ReactJS中禁用Material-UI密码输入框标签浮动动画

开发者阿泽

2026-9-1

解决方案

你现在出现浮动标签动画的核心原因是同时使用了InputLabel组件和OutlinedInput的label属性，这两个配置是MUI专门为浮动标签设计的，单独设置shrink={true}只能让标签默认处于缩小上浮状态，没法移除整个浮动交互逻辑。
要改成普通占位符样式的密码输入框，按以下步骤修改即可：

移除<FormControl>下嵌套的整个<InputLabel>组件
删除OutlinedInput组件上的label="Password"属性，这个属性会让输入框上边缘预留标签位置，导致样式错位
给OutlinedInput添加placeholder属性，传入你需要的占位提示文本即可
原有密码显隐切换的逻辑不需要改动，功能可以完全保留

改造后完整代码

<Box sx={{ display: "flex", flexWrap: "wrap" }}>
  <div>
    <FormControl sx={{ m: 1, width: "25ch" }} variant="outlined">
      <OutlinedInput
        id="outlined-adornment-password"
        type={values.showPassword ? "text" : "password"}
        value={values.password}
        onChange={handleChange("password")}
        placeholder="Type here..."
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
              edge="end"
            >
              {values.showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        }
      />
    </FormControl>
  </div>
</Box>

实现效果