禁用浮动左上角标签动画素材-ui密码输入ReactJS

Question

我发现了一个带有隐藏/显示密码图标的现有输入，但问题是浮动标签，因为我使用了材质UI，而且我没有找到一种方法来删除该动画并使其看起来像带有占位符的简单输入文本

这是我的代码：

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

当我单击输入时，它看起来像这样，所以我想删除该浮动效果并使其看起来正常

使用收缩={true}时

Answer 1

您需要在

shrink={true}

上添加

InputLabel

才能消除标签浮动效果。

      <InputLabel shrink={true}>
        Type here...
      </InputLabel>

Answer 2

如果您跳过标签而只有 mat-form-field 和输入，则占位符仍然存在，但根本没有浮动标签。这是 floatLabel，请参阅链接：https://material.angular.io/components/form-field/overview#floating-label