styled-components - CSS 浏览器与样式组件的兼容性

Question

我正在使用 styled-components CSS-in-JS 设计我的 Gatsby.js 网站。

styled-components 是否让我的 CSS 跨浏览器兼容？

例如，假设我正在为表单设置样式。使用传统的 CSS，我会做类似的事情：

button, input, select, textarea {
  margin: 0;
  width: 100%;
       border-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

使用样式组件，我想这样做：

const Form = styled.form`
  button, input, select, textarea {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
`

我可以省略这些-moz或-webkit声明并最终得到跨浏览器兼容的 CSS 吗？

Answer 1

styled-components库已选择自动为供应商样式添加前缀，因此您无需提供-moz或-webkit extensions.

图书馆会帮你处理的。它是由下面使用stylis的解析器完成的styled-components。您可以查看他们的实时预览以查看添加了哪些。