javascript - 在所有浏览器上，边框在Material-ui Chip组件周围以正常缩放出现，但在放大或缩小时不会出现

编辑

我发现，如果将-webkit-appearance: none;行添加到div的根Chip中，问题将自行解决。但是，这是由inline-styler自动添加的，我真的希望它会停止添加供应商前缀，原因不仅仅包括此前缀。

任何更多的见解表示赞赏。

我对material-ui Chip组件有一个很奇怪的问题。如果您以不同的缩放级别看下面的同一Chip，这是不言而喻的：

缩小-75％



缩小-90％



正常缩放-100％



放大-110％



我以前从未见过这样的东西，我对它可能是什么感到很好奇。仅供参考，无论使用Chrome还是Safari或Firefox，都是相同的问题，尽管在某些浏览器（尤其是Safari）上，它在任何缩放级别均不起作用。请注意，我正在OS X上进行测试。

Chip的代码是：

        <Chip
          key={`ffeffef`}>
          <Avatar size={32}>B</Avatar>
          Blah blah
        </Chip>

当我不使用Avatar时，它有时可以工作，但我认为它看起来像是在“热加载”组件时一样，而不是在刷新后才出现。这是一个非常奇怪的问题。

CSS并不表示它应该有边框。

任何帮助表示赞赏。

最佳答案

发生这种情况是因为<Chip>组件使用div属性渲染了type="button"，但是在materialize-css的最新版本中设置了一条规则：

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}

我通过设置来修复它：

[type=button]{
  -webkit-appearance: none
}

在全局css文件中。

顺便说一句，不仅只有<Chip>组件受到影响，我还在<ListItem>中运行了此问题。在github上搜索问题，我看到人们也抱怨其他组件。希望维护人员能尽快解决此问题。

关于javascript - 在所有浏览器上，边框在Material-ui Chip组件周围以正常缩放出现，但在放大或缩小时不会出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38671391/