styled-components 库的实践用法总结

前言

前段时间开发了一个 NiceTab 浏览器插件，并写了一篇介绍文章，新开发了一款浏览器Tab管理插件，OneTab 的升级替代品, 欢迎品尝!。

在插件中用到了 styled-components 这个库，于是做一个基本的介绍和分享。

在开发 NiceTab 插件时，只是一些粗浅的使用，整理完这篇使用笔记后，我准备优化一波了。

styled-components 库介绍

什么是 styled-components

styled-components 是一个流行的 CSS-in-JS 库, 它允许您在 JavaScript 中编写 CSS 样式，是 CSS-in-JS 方案中的一种实现方式。

styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.

• 官方文档: 官方文档
• Github: Github

为什么要使用 styled-components

我们看看官网介绍：

• Automatic critical CSS - 自动关键CSS: 完全自动地跟踪页面上呈现的组件并注入它们的样式。结合代码分割，按需加载。
• No class name bugs - 不存在类名冲突问题: 生成唯一的类名。不用担心类名重复、冲突、覆盖以及拼写错误等问题。
• Easier deletion of CSS - 便于样式剔除: 传统的编写样式方式很难检测样式和类名是否被使用。而 styled-components 会与特定的组件关联，在工程化项目中，构建工具可以轻易的检测到样式组件是否被使用，未被使用的样式组件会被剔除，避免无用代码打包到构建产物中。
• Simple dynamic styling - 易于编写动态样式: styled-components 样式组件可以根据 props 和全局主题来动态调整样式，无需手动管理众多样式类。
• Painless maintenance - 便于维护: 不需要查找众多文件来排查组件样式，降低维护成本。
• Automatic vendor prefixing - 自动添加厂商前缀: 您只需要编写标准的 CSS 样式，其他的事情 styled-components 自动帮您处理。

传统 CSS 方式的缺点：

• 缺乏作用域，全局样式污染，容易出现类名冲突，样式覆盖问题，出现问题难以排查。需要通过 namespace 命名空间、书写顺序、优先级等方式来缓解。
• 原生 CSS 在没有 scss，less 等预处理器的情况下，编写起来非常痛苦。
• 实现动态样式，需要预先定义多个类名，为不同类目编写对应的样式，然后根据情况动态绑定不同的类名。

开发中感受：

• 编写一个功能组件，可能只需要添加少许样式 (现在的项目大多都会使用 UI 组件库，自带各种样式)，为此而创建一个 css 文件不划算，还可能会有全局样式污染。只需要在该功能组件中定义一个 styled-components 样式组件即可。
• 在 html 标签元素书写行内样式或者绑定 style 变量都难以定义伪类样式和复杂选择器（如：:hover, :before, :after, :first-child， &选择器, +选择器等等）
• 如果编写的功能组件需要编写的样式比较多，可以抽取到一个 js 或 ts 文件中，然后引入即可，因为 styled-components 定义的都是 js 对象。
• 支持 scss 风格的语法。
• 快速定位样式定义代码：传统的方式，需要全局搜索元素类名，才能定位到样式代码。而 js 方式的定义，编辑器能快速跳转定位。

styled-components 的缺点：

• 生成的类名是一串 hash 值， 会绑定到对应的 dom 标签上，难以定位元素，建议给 styled-components 样式组件都添加一个 class 样式名，便于识别。

其他 css-in-js 方案

使用 css-in-js 方案的库，比较常见的还有 emotion 和 jss, 大家可以自行尝试使用。

styled-components 的基本使用

安装

• npm 安装：npm install styled-components
• pnpm 安装：pnpm add styled-components
• yarn 安装：yarn add styled-components

如果您使用像 yarn 这种支持 package.json 的 resolutions 字段的包管理器，强烈建议您向其中添加一个与主版本对应的入口配置。这有助于避免因项目中安装了多个版本的 styled-components 而引起的一系列问题。

基本用法

参考链接：getting-started

先上一个示例：

import styled from "styled-components";
// 创建一个 Title 样式组件，使用 <h1> 标签
const Title = styled.h1`
  font-size: 24px;
  text-align: center;
  color: #fff;
`;

// 创建一个 Wrapper 样式组件，使用 <section> 标签
const Wrapper = styled.section`
  padding: 30px;
  background: #000;
`;

// 在 jsx 中使用
export default function App() {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  );
}

使用起来挺简单的，除了上面示例中的 h1 和