Styled-Components：高效地在 JS 文件中编写 CSS。

使用 React 构建 Web 应用不仅仅是将组件组合在一起并确保逻辑正确运行。这可以说是最重要的部分，至少也是使用 React 的最大原因。但构建 React 应用也包括为这些应用设计样式。

我们希望确保我们的 Web 应用程序看起来不错，并且样式也是构建组件的重要组成部分。

Styled-components 是一个 CSS-in-JS 样式库，它使用 JavaScript 和 CSS 规则中的标记模板文字来提供预先设置样式的组件，其中样式的范围仅限于该反应组件。

JavaScript 变量和反引号中定义的样式button都是普通的 CSS 样式。我们还可以看到嵌套的 style 属性，其中包含普通的 CSS 样式。
这就是 styled-components 在 JavaScript 中渲染 CSS 的方式。

React 组件样式

主要有两种方法来设置 React 组件的样式。

内联样式

const style = {
  color: 'blue',
};

function App() {
  return <div style={style}>Hello World!</div>;
}

内联样式具有最高的优先级值之一，它会覆盖任何其他 CSS 规则。强烈不建议使用此方法，因为它既不可持续也不可扩展。

外部造型

有一种更传统的方式是在外部 CSS 文件中使用 CSS，然后将其作为字符串传递给classNameprop

return (
  <div className="red-text"> some text </span>
)

随着组件树的增长，CSS 文件开始变得庞大、笨重且复杂。一个很好的替代解决方案是使用 SASS。虽然 SASS 有所帮助，但由于项目中可能包含大量的 SCSS 文件，您最终仍会遇到同样的问题。

最后，CSS-in-JS 是一种使用 JavaScript 来设置组件样式的技术。当浏览器解析此 JavaScript 时，CSS 会生成样式元素并附加到<head></head>HTML 文档中。

为什么要使用 Styled-Components

您可以自由地构建自定义的预样式组件。您不再需要在 JS 文件和 CSS 文件之间来回切换，而是可以一次性构建自定义样式的 React 组件。

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

return (
  <div>
    <Button>Normal Button</Button>
  </div>
);

类名无 bug。styled-components 会为你的样式生成唯一的类名。你无需担心重复、重叠或拼写错误。
运用 Sass 的强大功能。使用 styled-components 时，您可以轻松使用类似 SASS 的嵌套功能。
更轻松地删除 CSS。您可能很难知道某个类名是否在代码库中被使用。styled-components 可以简化这一过程，因为所有样式都与特定组件绑定。如果组件未使用（工具可以检测到）并被删除，则其所有样式都会随之删除。
简单的动态样式。根据组件的 props 或全局主题调整组件的样式简单直观，无需手动管理数十个类。
自动添加供应商前缀。按照当前标准编写 CSS，其余部分交给 styled-components 处理。
您可以享受所有这些好处，同时仍然可以编写您熟悉和喜爱的 CSS，只需将其绑定到各个组件即可。
轻松维护。您无需在不同文件中搜索影响组件的样式，因此无论代码库有多大，维护都是轻而易举的事。
自动关键 CSS。Styled-Components 会跟踪页面上渲染的组件，并自动注入其样式，无需任何额外操作。结合代码拆分，这意味着您的用户只需加载最少的代码。

这会影响你的表现吗？

如果您不使用原生 CSS 内联样式，那么使用任何开源样式库进行样式设计都可能带来一些性能开销。然而，这微小的性能开销正是您为 styled-components 的强大功能和灵活性所付出的代价。
值得庆幸的是，styled-components 致力于在每次发布新版本时提升库的性能。它一直在不断改进。

结论

Styled-components 的社区发展迅速，GitHub 上已有超过 33,000 名成员，这令人振奋，也证明了该项目的长期可行性。它只会越来越好。

编码愉快！

鏂囩珷鏉ユ簮锛�https://dev.to/ankur29mac/styled-components-efficiently-write-css-in-js-file-1nj6