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

【问题标题】：CSS browser compatibility with styled-componentsCSS 浏览器与样式组件的兼容性
【发布时间】：2019-05-14 06:13:48
【问题描述】：

我正在使用 styled-components CSS-in-JS 为我的 Gatsby.js 网站设置样式。

样式组件是否让我的 CSS 在浏览器中兼容？

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

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

使用 styled-components，我想这样做：

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

我是否可以省略这些 -moz 或 -webkit 声明并仍然得到跨浏览器兼容的 CSS？

【问题讨论】：

标签： styled-components css-in-js

【解决方案1】：

styled-components 库具有 opted for 自动前缀供应商样式，因此您无需提供 -moz 或 -webkit extensions。

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

【讨论】：