前言 随着组件化时代的兴起，前端应用开始采用组件级别的 CSS 封装：通过 JavaScript 声明和抽象样式，以提高组件的可维护性。在组件加载时动态加载样式，并动态生成类名，从而避免全局污染。 styled-components 是其中的杰出代表。 正如其名称所示，styled-components 以组件的形式声明样式，将样式与组件分离，实现逻辑组件与展示组件的分离。 styled-co

花一个月时间为 vue3 重制了 vue-styled-components 前言 styled-components 在 React 是一个超级热门的 css in js 工具库。其实 styled-components 也有 Vue 版本（vue-styled-components），可惜的是只支持 Vue2，并且该项目已有几年没有更新，作者大概率不会发布 Vue3 版本了。 因此我决定

#CSS in JS (JSS) JSS 是什么 简单来说，一句话概括CSS in JS (JSS)，就是"行内样式"（inline style）和"行内脚本"（inline script）。 因为，自从React出现以后，基于组件化的要求，强制把HTML、CSS、JavaScript捆绑在一起，在同一个文件里面，封装了结构、样式、以及逻辑。这虽然违背html发明初期的"关注点分离"的

styled-components 是什么？ styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。 相对于其他预处理有什么优点？ 诸如 sass&less 等预处理可以解决部分 css 的局限性，但还是要学习新的语法，而且需要对其编译，其复杂的 webpack 配置也总

用于给标签或组件添加样式 给标签或组件添加样式 import styled from 'styled-components'// styled.button : 给button标签添加样式 const Button = styled.button`background: palevioletred;border-radius: 3px;border: none;color: white;`

本文目录 一、styled-components1.1 安装使用1.2 基于props做样式判断1.3 样式化任意组件1.4 动画 一、styled-components 1.1 安装使用 styled-components它是通过javascript改变css编写方式的解决方案之一，从根本上解决常规css编写的一些弊端。 通过javascript来为css赋能，能达到常规