2023年6月21日发(作者：)

styled-components中⽂⽂档翻译及不完全指北前⾔官⽅⽂档地址：中⽂⽂档地址：styled-components是⼀个React的第三⽅库，是CSS in JS的优秀实践。初次了解styled-components是在读林昊翻译的⼀书时。虽然接触的⽐较晚，但深深的被它的强⼤和优雅所吸引。然⽽其中⽂资料⽐较匮乏，为帮助更多的⼩伙伴了解这个强⼤的⼯具，翻译了部分官⽅⽂档。能⼒所限，已翻译部分可能仍有字词错误或语句不通顺的地⽅，欢迎有能⼒的同学帮助纠正。styled-components究竟强在哪⾥？这要从它所解决的问题说起：CSS 的痛点不可否认，CSS是⼀门神奇的“语⾔”（）。它易于上⼿、却难以精通。它没有变量、函数等概念导致它的表现⼒要稍弱于其它语⾔，⽽它索要解决的问题却⼜很复杂。 关于这⼀点，这个问题下的⼀百多个答案就很能说明问题了。⽇常使⽤中，CSS 的痛点很多，但⼤多围绕以下两点：全局污染：CSS 选择器的作⽤域是全局的，所以很容易引起选择器冲突；⽽为了避免全局冲突，⼜会导致类命名的复杂度上升复⽤性低：CSS 缺少抽象的机制，选择器很容易出现重复，不利于维护和复⽤CSS in JS随着组件化时代的来临，前端应⽤开始从组件的层⾯对 CSS 进⾏封装：也就是通过 JS 来声明、抽象样式从⽽提⾼组件的可维护性；在组件加载时动态的加载样式，动态⽣成类名从⽽避免全局污染。styled-components就是其中的佼佼者。顾名思义，styled-components以组件的形式来声明样式，让样式也成为组件从⽽分离逻辑组件与展⽰组件（这个思路看起来是不是很眼熟），来看⼀下官⽅的⽰例：const Button = styled.a` /* This renders the Edit me! */ display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; /* The GitHub button is a primary button * edit this to target it specifically! */ ${props => y && css` background: white; color: palevioletred; `}`render(

)复制代码可以看到，styled-components通过标记的模板字符来设置组件样式.它移除了组件和样式之间的映射.当我们通过styled-components定义样式时,我们实际上是创建了⼀个附加了样式的常规 React 组件.同时它⽀持将props以插值的⽅式传递给组件,以调整组件样式.官⽅宣称styled-components的优点如下：Automatic critical CSS: styled-components 持续跟踪页⾯上渲染的组件,并向⾃动其注⼊且仅注⼊样式. 结合使⽤代码拆分, 可以实现仅加载所需的最少代码.解决了 class name 冲突: styled-components 为样式⽣成唯⼀的 class name. 开发者不必再担⼼ class name 重复,覆盖和拼写错误的问题.CSS 更容易移除: 想要确切的知道代码中某个 class 在哪⼉⽤到是很困难的. 使⽤ styled-components 则很轻松, 因为每个样式都有其关联的组件. 如果检测到某个组件未使⽤并且被删除,则其所有的样式也都被删除.简单的动态样式: 可以很简单直观的实现根据组件的 props 或者全局主题适配样式,⽆需⼿动管理数⼗个 classes.⽆痛维护: ⽆需搜索不同的⽂件来查找影响组件的样式.⽆论代码多庞⼤，维护起来都是⼩菜⼀碟。⾃动提供前缀: 按照当前标准写 CSS,其余的交给 styled-components 处理.题外话CSS 的问题，也有其他解决⽅案，⽐如著名的CSS Module⽅案。社区中也⼀直存在对于两者孰优孰劣的争执。本⽂不会⽐较这两种解决⽅案，但有兴趣的朋友可以参考⼀下这两篇⽂章：

2023年6月21日发(作者：)

styled-components中⽂⽂档翻译及不完全指北前⾔官⽅⽂档地址：中⽂⽂档地址：styled-components是⼀个React的第三⽅库，是CSS in JS的优秀实践。初次了解styled-components是在读林昊翻译的⼀书时。虽然接触的⽐较晚，但深深的被它的强⼤和优雅所吸引。然⽽其中⽂资料⽐较匮乏，为帮助更多的⼩伙伴了解这个强⼤的⼯具，翻译了部分官⽅⽂档。能⼒所限，已翻译部分可能仍有字词错误或语句不通顺的地⽅，欢迎有能⼒的同学帮助纠正。styled-components究竟强在哪⾥？这要从它所解决的问题说起：CSS 的痛点不可否认，CSS是⼀门神奇的“语⾔”（）。它易于上⼿、却难以精通。它没有变量、函数等概念导致它的表现⼒要稍弱于其它语⾔，⽽它索要解决的问题却⼜很复杂。 关于这⼀点，这个问题下的⼀百多个答案就很能说明问题了。⽇常使⽤中，CSS 的痛点很多，但⼤多围绕以下两点：全局污染：CSS 选择器的作⽤域是全局的，所以很容易引起选择器冲突；⽽为了避免全局冲突，⼜会导致类命名的复杂度上升复⽤性低：CSS 缺少抽象的机制，选择器很容易出现重复，不利于维护和复⽤CSS in JS随着组件化时代的来临，前端应⽤开始从组件的层⾯对 CSS 进⾏封装：也就是通过 JS 来声明、抽象样式从⽽提⾼组件的可维护性；在组件加载时动态的加载样式，动态⽣成类名从⽽避免全局污染。styled-components就是其中的佼佼者。顾名思义，styled-components以组件的形式来声明样式，让样式也成为组件从⽽分离逻辑组件与展⽰组件（这个思路看起来是不是很眼熟），来看⼀下官⽅的⽰例：const Button = styled.a` /* This renders the Edit me! */ display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; /* The GitHub button is a primary button * edit this to target it specifically! */ ${props => y && css` background: white; color: palevioletred; `}`render(

)复制代码可以看到，styled-components通过标记的模板字符来设置组件样式.它移除了组件和样式之间的映射.当我们通过styled-components定义样式时,我们实际上是创建了⼀个附加了样式的常规 React 组件.同时它⽀持将props以插值的⽅式传递给组件,以调整组件样式.官⽅宣称styled-components的优点如下：Automatic critical CSS: styled-components 持续跟踪页⾯上渲染的组件,并向⾃动其注⼊且仅注⼊样式. 结合使⽤代码拆分, 可以实现仅加载所需的最少代码.解决了 class name 冲突: styled-components 为样式⽣成唯⼀的 class name. 开发者不必再担⼼ class name 重复,覆盖和拼写错误的问题.CSS 更容易移除: 想要确切的知道代码中某个 class 在哪⼉⽤到是很困难的. 使⽤ styled-components 则很轻松, 因为每个样式都有其关联的组件. 如果检测到某个组件未使⽤并且被删除,则其所有的样式也都被删除.简单的动态样式: 可以很简单直观的实现根据组件的 props 或者全局主题适配样式,⽆需⼿动管理数⼗个 classes.⽆痛维护: ⽆需搜索不同的⽂件来查找影响组件的样式.⽆论代码多庞⼤，维护起来都是⼩菜⼀碟。⾃动提供前缀: 按照当前标准写 CSS,其余的交给 styled-components 处理.题外话CSS 的问题，也有其他解决⽅案，⽐如著名的CSS Module⽅案。社区中也⼀直存在对于两者孰优孰劣的争执。本⽂不会⽐较这两种解决⽅案，但有兴趣的朋友可以参考⼀下这两篇⽂章：