Material ui 在材质UI输入中使用自定义尾饰时使用双尾饰

当我尝试使用MaterialUI输入时，我只是复制并粘贴了代码，尤其是密码部分，但是，在复制了代码之后，它就不能像演示那样工作了。当您第一次渲染组件并单击文本字段时，将有2个EndAdorments（在这两个字段上，您可以切换以显示密码）。 以下是我使用的代码：

      <Input
        className={classes.input}
        type={values.showPassword ? "text" : "password"}
        value={values.password}
        onChange={handleInputChange("password")}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
            >
              {values.showPassword ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        }
      />

更奇怪的是，一旦你点击离开（任何地方），第一只眼睛就消失了，它的行为和我们想要的一样。 有人知道如何解决这个问题吗

如果有人想玩，这里有沙盒链接：

我使用了来自的代码（下文），但无法重现该问题：

从“React”导入React；
从“clsx”导入clsx；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/Input”导入输入；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/inputadornation”导入输入；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/icons/Visibility”导入可见性；
从“@material ui/icons/VisibilityOff”导入VisibilityOff；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
柔性包装：“包装”
},
保证金：{
页边空白：主题。间距（1）
},
withoutLabel：{
marginTop：主题。间距（3）
},
文本字段：{
宽度：“25厘米”
}
}));
导出默认函数InputAdornments（）{
const classes=useStyles（）；
const[values，setValues]=React.useState({
金额：“，
密码：“”，
重量：“，
权重范围：“，
showPassword:false
});
常量handleChange=（道具）=>（事件）=>{
setValues（{…values，[prop]：event.target.value}）；
};
const handleClickShowPassword=（）=>{
setValues（{…values，showPassword:！values.showPassword}）；
};
const handleMouseDownPassword=（事件）=>{
event.preventDefault（）；
};
返回(
密码
);
}

---

我想我明白了。这是由于边缘。如果我用chrome打开它，就不会有问题了。如上图所示。

我尝试将您的代码复制到我的沙箱中。不幸的是，它将与我的问题相同。我没有做任何修改和复制粘贴所有的类/导入你和我的代码都是正确的。这是由于新的优势。如果使用相同的沙盒链接打开Edge和chrome，它们会产生不同的行为。对。因此，这个问题并不存在于

mui

，但是有没有办法通过

js

代码来避免它呢？