在 Microsoft Edge 浏览器中遇到材料 UI 可见性密码问题，请检查不同的方式

Question

在 Microsoft Edge 浏览器中遇到材料 UI 可见性密码问题，请检查不同的方式。

并遵循此

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

还有输入装饰的Material ui 文档 https://mui.com/components/text-fields/#InputAdornments.js

基本上，我们只需要一种可见性，因为默认材质 UI 已提供，但在 Microsoft Edge 浏览器中，我们收到了 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>

Answer 1

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

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

<style>
      input::-ms-reveal,
      input::-ms-clear {
        display: none;
      }
</style>

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

MS Edge（版本 93.0.961.52）浏览器中的输出。

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

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

您还可以将上述 CSS 代码放入本示例的 CSS 文件中。根据您的要求，您可以修改它。

Answer 2

    "& input::-ms-reveal": {
      display: "none",
    },
    "& input::-ms-clear": {
      display: "none",
    },

这对我有用，因为我只检查了边缘浏览器