MUI@Next TextField组件：添加密码切换后required星号不显示问题

嘿，我之前也踩过这个坑！在MUI v5（也就是你说的@Next版本）里，普通TextField加required属性会自动在标签末尾带出*标记，但给密码字段加了endAdornment做显示密码切换功能后，这个必填标记就莫名消失了对吧？

问题根源 #

其实是因为当你自定义InputProps设置endAdornment时，TextField内部默认的InputLabel和组件状态的关联逻辑被打断了——原本组件会自动把required属性传递给内部的标签，但自定义装饰器后这个自动关联没生效，导致标签不知道自己要渲染必填标记。

两种实用解决办法 #

方法一：显式使用InputLabel组件（推荐）

这是最灵活稳妥的方式，直接把原来的字符串label替换成InputLabel组件，同时给它也加上required属性，和TextField的required保持一致：

import { TextField, InputLabel, InputAdornment, IconButton } from '@mui/material';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

// 组件内部逻辑
const [showPassword, setShowPassword] = useState(false);

const handleTogglePassword = () => {
  setShowPassword(!showPassword);
};

return (
  <TextField
    required
    label={<InputLabel required>Password</InputLabel>}
    type={showPassword ? 'text' : 'password'}
    InputProps={{
      endAdornment: (
        <InputAdornment position="end">
          <IconButton onClick={handleTogglePassword} edge="end">
            {showPassword ? <VisibilityOff /> : <Visibility />}
          </IconButton>
        </InputAdornment>
      )
    }}
  />
);

这样不管有没有自定义endAdornment，InputLabel都会因为自身的required属性渲染出*标记，完美适配动态必填状态的场景。

方法二：静态拼接标签文本（适合简单场景）

如果你的必填状态是固定不变的，也可以直接在label文本后手动加*：

<TextField
  required
  label="Password *"
  type={showPassword ? 'text' : 'password'}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton onClick={handleTogglePassword}>
          {showPassword ? <VisibilityOff /> : <Visibility />}
        </IconButton>
      </InputAdornment>
    )
  }}
/>

这种方式简单粗暴，但如果required是动态值（比如根据表单状态切换），就不太灵活了，还是方法一更推荐。

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