在所有浏览器上，正常缩放时 material-ui 内部的芯片组件出现边框，但在放大或缩小时不会出现边框

Question

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

如有更多见解，我们将不胜感激。

material-ui Chip 组件有一个非常奇怪的问题。如果您在下面以不同的缩放级别查看相同的 Chip，这将是不言自明的：

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

上进行测试

Chip 的代码是：

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

当我不使用 Avatar 时，它有时可以工作，但我认为它只在 "hot loads" 组件时显示，而不是之后新鲜的刷新。这是一个很奇怪的问题。

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

感谢任何帮助。

Answer 1

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

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

我已经通过设置修复了它：

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

在全局 css 文件中。

顺便说一句，不仅 <Chip> 个组件受到影响，我运行和 <ListItem> 一起处理了这个问题。在 github 上搜索问题，我看到人们也抱怨其他组件。希望维护者能尽快解决这个问题。

Border appears around material-ui Chip component inside at normal zoom but not when zoomed in or out, on all browsers