Material UI密码可见性组件在Microsoft Edge浏览器出现双眼睛图标问题求解

问题原因 #

该问题是Microsoft Edge浏览器默认会为type="password"的输入框自带原生密码可见性切换图标，和你手动添加的Material UI自定义图标叠加，就会出现两个眼睛图标同时显示的情况。

解决方案 #

你只需要通过CSS禁用Edge的原生密码控件图标即可，有两种实现方式可选：

• 方案1：全局样式配置，适合全站所有密码输入框统一处理
  在全局CSS文件中添加以下代码：

/* 禁用Edge/IE原生的密码显示、清除图标 */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

• 方案2：组件局部配置，仅作用于当前密码输入框，不影响其他业务模块
  直接修改你的OutlinedInput组件，新增sx配置项即可，修改后的完整代码如下：

<FormControl sx={{ m: 1, width: "25ch" }} variant="outlined">
    <InputLabel htmlFor="outlined-adornment-password">
      Password
    </InputLabel>
    <OutlinedInput
      id="outlined-adornment-password"
      type={values.showPassword ? "text" : "password"}
      value={values.password}
      onChange={handleChange("password")}
      // 新增以下sx配置，局部禁用原生图标
      sx={{
        '& input::-ms-reveal, & input::-ms-clear': {
          display: 'none'
        }
      }}
      endAdornment={
        <InputAdornment position="end">
          <IconButton
            aria-label="toggle password visibility"
            onClick={handleClickShowPassword}
            onMouseDown={handleMouseDownPassword}
            edge="end"
          >
            {values.showPassword ? <VisibilityOff /> : <Visibility />}
          </IconButton>
        </InputAdornment>
      }
      label="Passwords"
    />
  </FormControl>

两种方案任选其一即可，修改后只会保留你自定义的Material UI切换图标，功能不受任何影响。

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