在Microsoft Edge浏览器中的材料UI可见性密码出现

问题时，检查了不同的方法。

然后跟着这个

https：//codesandbox.io/s/inputadornments-material-demo-forked-4euh8？file=/demo.js：549-559

也是输入装饰的物料UI单据https：//mui.com/components/text-fields/#inputadornments.js.

基本上，我们只需要一个可见性，因为默认的材料用户界面已经提供了，但在微软边缘浏览器中，我们收到了2个可见性眼睛图标，试图接近不同的方法。

我附上了代码参考。

  <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")}
        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>

---

顺晟科技：

如果我们尝试查看示例的文件结构，您将在公共文件夹下找到index.html文件。

打开index.html文件并在style标签中添加下面的代码。

<代码><；样式>；输入：-ms-reveal，输入：-ms-clear{显示：无；}<；/样式>；

保存文件并在MS Edge浏览器中运行示例。

在MS Edge（版本93.0.96 1.52）浏览器中

输出。

您可能会注意到，它并没有像您在问题中所说的那样显示两个眼睛图标。

您可以在实际代码中执行相同的操作，以避免MS Edge浏览器出现上述问题。

您也可以将上面的CSS代码放在本例的CSS文件中。根据你的要求，你可以修改它。