网站和网页的区别网站关键词搜索
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 和