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

Question

我正在使用样式组件 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。您可以检查它们的实时预览以查看添加了哪些。