开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

前言：

成功没有捷径但成长有路径

老概念新理解，重点记录一下

正文

背景

react的写法其实是用JavaScript在写HTML和CSS。由于CSS的封装非常弱，导致了一系列的第三方库，用来加强React的CSS操作。它们统称为CSS in JS,意思就是使用JS语言写CSS。

什么是CSS in JS

CSS-in-JS是一种技术，简单来说就是将应用的CSS样式写在JavaScript文件里面,而不是独立为一些.css之类的文件。它当初的出现是框架的流行，使得开发者也想将组件的CSS样式一块封装到组件中去。

方案

目前主流css in js的库主要有以下几种

styled-components: styled-components.com/

emotion: emotion.sh/docs/introd…

vanilla-extract: vanilla-extract.style/

xstyled: xstyled.dev/

可能有很多人都没有用过这种方式去写css样式，一个是觉得奇奇怪怪，一个是不清楚他是否能带来哪些收益；在后面我会大概总结一些优点和缺点，让大家可以做一些参考。用法都差不多，这里主要介绍下styled-components

安装&引入

npm install --save styled-components
import styled from 'styled-components'

基础用法

我们用styled-components创建一个样式组件，渲染之后是一个div标签(注意组件首字母必须大写)

const Wrapper =styled. div`
    color:blue;
` ;

render(
    <Wrapper>
        Hello World!
    </Wrapper>
 ) ;

选择器

标签名和类名&&伪类和伪元素
我们可以通过标签名和类名设置样式组件中的html标签的样式，同样可以使用伪类和伪元素，使用方法和原生css一模一样。

传值

可以动态修改css

const Header =styled. div<{fontSize:string }>`
    width:100%;
    height:56px;
    color:#fff;
    background:#ccc;
    box-shadow:0 1px 4px 0 rgb(5 29 51/7%);
    font-size:${props =>props.fontSize};
;

通过这几个例子可以看出来，styled-components中的css写法和原生的css写法其实差别并不大。应用场景比如换肤之类的。

总结

优点

局部样式
变量处理动态样式写起来更灵活
样式写在组件内，减少了对css文件依赖
可重写组件样式，无需global

缺点

学习成本高
样式自动生成随机字符串,不好定位组件样式
造成js文件体积增加
性能代价，大多数是在客户端动态生成的css
没有统一标准

目前css in js的实现，还处于两极分化的情况。我觉得，任何一个技术可能都会有两面性，在你选择的时候如果利大于弊，我觉得也不是不可以去做一次尝试。