Material UI：添加StartAdornment后TextField standard变体标签异常

问题描述 #

使用Material UI的standard变体TextField组件时，添加带图标的StartAdornment后，label会始终保持上浮状态，无法实现「仅在组件获得焦点时label才上浮」的预期效果。

问题代码 #

export const Temp = () => {
  return (
    <div>
      <Grid sx={{ mt: 1.5 }}>
        <TextField
          variant="standard"
          required
          fullWidth
          label="Enter Mobile Number"
          autoFocus
          InputProps={{
            startAdornment: (
              <LoginRoundedIcon
                sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
                position="start"
              >
                <Visibility></Visibility>
              </LoginRoundedIcon>
            ),
          }}
        />
      </Grid>
    </div>
  );
};

问题原因 #

standard变体的TextField在检测到InputProps.startAdornment存在时，会默认触发label上浮的逻辑，误将装饰元素判定为输入内容的一部分。

解决方案 #

方法一：用InputAdornment组件包裹图标（推荐） #

这是符合Material UI组件规范的正确用法，通过InputAdornment包裹图标，组件能正确识别装饰元素，避免label异常上浮。

import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import LoginRoundedIcon from '@mui/icons-material/LoginRounded';
import Visibility from '@mui/icons-material/Visibility';
import InputAdornment from '@mui/material/InputAdornment';

export const Temp = () => {
  return (
    <div>
      <Grid sx={{ mt: 1.5 }}>
        <TextField
          variant="standard"
          required
          fullWidth
          label="Enter Mobile Number"
          autoFocus
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <LoginRoundedIcon
                  sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
                >
                  <Visibility />
                </LoginRoundedIcon>
              </InputAdornment>
            ),
          }}
        />
      </Grid>
    </div>
  );
};

方法二：通过聚焦状态控制label的shrink属性 #

使用useState跟踪组件的聚焦状态，动态设置InputLabelProps.shrink，仅在聚焦时让label上浮。

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import LoginRoundedIcon from '@mui/icons-material/LoginRounded';
import Visibility from '@mui/icons-material/Visibility';

export const Temp = () => {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <div>
      <Grid sx={{ mt: 1.5 }}>
        <TextField
          variant="standard"
          required
          fullWidth
          label="Enter Mobile Number"
          autoFocus
          InputProps={{
            startAdornment: (
              <LoginRoundedIcon
                sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
                position="start"
              >
                <Visibility />
              </LoginRoundedIcon>
            ),
          }}
          InputLabelProps={{
            shrink: isFocused
          }}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
      </Grid>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Abhishek Vyas