如何移除Material UI OutlinedInput的默认密码可见性图标

实际问题描述 #

使用 Material UI 的 OutlinedInput 组件实现密码输入场景时，只要将输入框类型设置为 password，浏览器会自动在输入框右侧渲染一套默认的密码可见性切换图标。
由于已经通过 InputAdornment 组件实现了自定义的可见性切换图标，两套图标重叠显示影响界面效果，需要彻底移除浏览器自带的默认图标。

现有实现代码 #

<FormControl variant="outlined">
  <InputLabel htmlFor="outlined-adornment-password">
    您当前的密码是什么？
  </InputLabel>
  <OutlinedInput
    id="outlined-adornment-password"
    type={showCurrentPsw ? 'text' : 'password'}
    value={currentPassword}
    name="currentpsw"
    onChange={({ target: { value } }) => {
      setCurrentPassword(value);
      value !== '' &&
        value.trim() !== '' &&
        setCurrentPswdEmpty(false);
    }}
    error={currentPswdEmpty}
    label="您当前的密码是什么？"
    required
    endAdornment={
      <InputAdornment position="end">
        <IconButton
          aria-label="您当前的密码是什么？"
          onClick={() => {
            setShowCurrentPsw(!showCurrentPsw);
          }}
          edge="end"
        >
          {showCurrentPsw ? (
            <Visibility />
          ) : (
            <VisibilityOff />
          )}
        </IconButton>
      </InputAdornment>
    }
  />
</FormControl>

效果参考 #

解决方法 #

这里出现的默认图标不是 Material UI 组件本身渲染的，是 Chrome、Edge 等主流浏览器针对 type="password" 类型的原生输入框自动注入的内置控件，无法通过修改组件 props 关闭，需要通过 CSS 样式隐藏。

• 通用全局CSS方案（兼容所有内核浏览器）

  /* 隐藏Edge/IE的原生密码可见、清除按钮 */
  input::-ms-reveal,
  input::-ms-clear {
    display: none;
  }
  /* 隐藏Chrome/Safari等WebKit内核的原生密码控件、自动填充凭证按钮 */
  input::-webkit-contacts-auto-fill-button,
  input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
  }
  

• Material UI v5 组件内联样式方案（无需单独引入CSS文件）
  直接在 OutlinedInput 组件上通过 sx 属性注入对应样式即可，不影响其他页面的输入框：

  <OutlinedInput
    // 原有业务属性保持不变
    sx={{
      "&::-ms-reveal, &::-ms-clear, &::-webkit-credentials-auto-fill-button": {
        visibility: "hidden",
        pointerEvents: "none",
      }
    }}
  />
  

注意：样式生效后，浏览器自带的密码切换控件会被完全隐藏，不会和自定义的 InputAdornment 图标出现位置重叠，也不会影响自定义密码显示状态切换逻辑的正常运行。 #

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