外观
第28章—CSSInJS：快速掌握styled-components
CSS in JS，顾名思义就是用 js 来写 css。
它也是一种很流行的 css 管理方案。
比如 styled-components 的样式是这样写：
可以传参数。
然后用的时候当作组件一样用：
样式用 js 写，可以当成组件用，可以传参，这是 CSS in JS 的方案独有的体验。
接下来我们也体验一下：
npx create-vite styled-components-test用 vite 创建个项目。
安装 styled-components：
npm install
npm install --save styled-components去掉 index.css 和 StrictMode：
然后改下 App.tsx：
import { styled } from 'styled-components';
const Title = styled.h1`
font-size: 30px;
text-align: center;
color: blue;
`;
const Header = styled.div`
padding: 20px;
background: pink;
`;
function App() {
return <Header>
<Title>
Hello World!
</Title>
</Header>
}
export default App跑起来看下：
npm run dev样式生效了：
打开 devtools 看下：
可以看到 styled.div、styled.h1 会创建对应的标签，然后样式会生成一个唯一的 className。
所以说，用 styled-components 不用担心样式冲突的问题。
继续看，styled-components 的 styled.xx 可以作为组件用，那自然是可以传参的：
import { styled } from 'styled-components';
const Title = styled.h1<{ color?: string; }>`
font-size: 30px;
text-align: center;
color: ${props => props.color || 'blue'}
`;
const Header = styled.div`
padding: 20px;
background: pink;
`;
function App() {
return <Header>
<Title>
Hello World!
</Title>
<Title color='green'>
Hello World!
</Title>
<Title color='black'>
Hello World!
</Title>
</Header>
}
export default App我们给 Title 样式组件添加一个 color 参数，然后分别传入 green、black。
看下效果：
确实样式组件用起来和其他 React 组件体验一样，加的 ts 类型也会有提示：
这也是为啥这个库叫 styled-components，样式组件。
有的时候，样式需要基于已有的做扩展，比如我有一个 Button 的样式，另一种 Button 和它大部分一样，但有所不同。
这时候就可以这样写：
import { styled } from 'styled-components';
const Button = styled.button<{ color?: string; }>`
font-size: 20px;
margin: 5px 10px;
border: 2px solid #000;
color: ${props => props.color || 'blue'}
`;
const Button2 = styled(Button)`
border-radius: 8px;
`;
function App() {
return <div>
<Button color='red'>Hello World!</Button>
<Button2 color='red'>Hello World!</Button2>
</div>
}
export default App如果你还想改样式组件的标签，可以用 as：
styled() 除了可以给样式组件扩展样式外，还可以给普通组件加上样式：
import { FC, PropsWithChildren } from 'react';
import { styled } from 'styled-components';
interface LinkProps extends PropsWithChildren {
href: string;
className?: string;
}
const Link: FC<LinkProps> = (props) => {
const {
href,
className,
children
} = props;
return <a href={href} className={className}>{children}</a>
}
const StyledLink = styled(Link)`
color: green;
font-size: 40px;
`;
function App() {
return <div>
<StyledLink href='#aaa'>click me</StyledLink>
</div>
}
export default App比如我们给 Link 组件加上样式。
这里要注意，Link 组件必须接收 className 参数，因为 styled-components 会把样式放到这个 className 上：
我们知道，样式组件也是可以接受参数的，为了区分两者，我们一般都是样式组件的 props 用 $ 开头：
const StyledLink = styled(Link)<{ $color?: string;}>`
color: ${props => props.$color || 'green'};
font-size: 40px;
`;
function App() {
return <div>
<StyledLink href='#aaa' $color="purple">click me</StyledLink>
</div>
}默认情况下，样式组件会透传所有不是它的 props 给被包装组件：
样式组件包了一层，自然是可以修改 props 的：
用 attrs 方法，接收传入的 props 返回修改后的 props。
import { FC, PropsWithChildren } from 'react';
import { styled } from 'styled-components';
interface LinkProps extends PropsWithChildren {
href: string;
className?: string;
}
const Link: FC<LinkProps> = (props) => {
console.log(props);
const {
href,
className,
children
} = props;
return <a href={href} className={className}>{children}</a>
}
const StyledLink = styled(Link).attrs<{ $color?: string;}>((props) => {
console.log(props);
props.$color = 'orange';
props.children = props.children + ' 光';
return props;
})`
color: ${props => props.$color || 'green'};
font-size: 40px;
`;
function App() {
return <div>
<StyledLink href='#aaa' $color="purple">click me</StyledLink>
</div>
}
export default Appattrs 支持对象和函数，简单的场景直接传对象也可以：
const Input = styled.input.attrs({ type: 'checkbox'})`
width: 30px;
height: 30px;
`;那伪类选择器、伪元素选择器这些呢？
当然也是支持的。
import { styled } from 'styled-components';
const ColoredText = styled.div`
color: blue;
&:hover {
color: red;
}
&::before {
content: '* ';
}
`
function App() {
return <>
<ColoredText>Hello styled components</ColoredText>
</>
}
export default App;写法和之前一样。
但 styled components 这个 & 和 scss 里的 & 含义还不大一样。
它指的是同一个样式组件的实例，这里也就是 ColoredText 的实例。
所以可以这样写：
import { styled } from 'styled-components';
const ColoredText = styled.div`
color: blue;
&:hover {
color: red;
}
&::before {
content: '* ';
}
&.aaa + & {
background: lightblue;
}
&.bbb ~ & {
background: pink;
}
`
function App() {
return <>
<ColoredText>Hello styled components</ColoredText>
<ColoredText className="aaa">Hello styled components</ColoredText>
<ColoredText>Hello styled components</ColoredText>
<ColoredText className="bbb">Hello styled components</ColoredText>
<div>Hello styled components</div>
<ColoredText>Hello styled components</ColoredText>
<ColoredText>Hello styled components</ColoredText>
</>
}
export default App;这里 &.aaa + & 就是 .aaa 的 ColoredText 样式组件之后的一个 ColoredText 样式组件实例。
&.bbb ~ & 就是 .bbb 的 ColoredText 样式组件之后的所有 ColoredText 样式组件实例。
此外，如果你把 & 全换成 &&，你会发现效果也一样：
那什么时候用 &、什么时候用 && 呢？
当你和全局样式冲突的时候。
styled-components 用 createGlobalStyle 创建全局样式：
我们全局指定 ColoredText 的 color 为 green，然后组件里指定 color 为 blue。
看下效果：
每个 ColorText 组件都会有一个 src-aYaIB 的 className，全局样式就是给这个 className 加了 color 为 green 的样式。
可以看到，组件里写的 color: blue 被覆盖了。
这时候你这样写是没用的：
用 && 才能覆盖：
它通过 .aaa.aaa 这样的方式实现了样式优先级的提升：
那动画怎么写呢？
有单独的 api：
import { styled, keyframes } from 'styled-components';
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const Rotate = styled.div`
display: inline-block;
animation: ${rotate} 2s linear infinite;
font-size: 50px;
padding: 30px;
`;
function App() {
return <Rotate>X</Rotate>
}
export default App;通过 keyframes 来编写动画，然后在 animation 里引用。
看下效果：
它为 @keyframes 生成了一个唯一 ID：
这大概就是加一个 keyframes 的 api 的意义。
此外，如果你想复用部分 css，要这样写：
const animation = css`
animation: ${rotate} 2s linear infinite;
`
const Rotate = styled.div`
display: inline-block;
${animation}
font-size: 50px;
padding: 30px;
`;不加 css 是不会生效的，你可以试一下。
抽出来的 css 也是可以用 props 的：
import { styled, keyframes, css } from 'styled-components';
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const animation = css<{ $duration: number }>`
animation: ${rotate} ${props => props.$duration}s linear infinite;
`
const Rotate = styled.div<{ $duration: number }>`
display: inline-block;
${animation}
font-size: 50px;
padding: 30px;
`;
function App() {
return <Rotate $duration={3}>X</Rotate>
}
export default App;但是 css 声明了类型，用到了这部分样式的 styled.xxx 也需要声明类型。
如果你希望样式组件用的时候可以传入一些样式，那可以用 RuleSet：
import { styled, keyframes, css, RuleSet } from 'styled-components';
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const animation = css<{ $duration: number }>`
animation: ${rotate} ${props => props.$duration}s linear infinite;
`
const Rotate = styled.div<{ $duration: number, otherStyles: RuleSet }>`
display: inline-block;
${animation}
font-size: 50px;
padding: 30px;
${props => props.otherStyles}
`;
function App() {
return <Rotate $duration={3} otherStyles={ [
{ border: '1px', background: 'pink' },
{ boxShadow: '0 0 3px blue'}
]}>X</Rotate>
}
export default App;它是一个样式对象的数组类型：
可以用的时候传入一些样式：
最后，styled-components 还有 theme 的 api。
这个也很简单，你会用 react 的 context 就会用这个：
import { styled, ThemeProvider } from 'styled-components';
const Aaa = styled.div`
width: 100px;
height: 100px;
background: ${props => props.theme.dark ? 'black' : '#ccc'}
`
function Content() {
return <Aaa></Aaa>
}
function App() {
return <ThemeProvider theme={{ dark: true }}>
<Content></Content>
</ThemeProvider>
}
export default App;每个样式组件都有 props.theme 可以读取当前 theme 对象，然后这个对象可以通过 useTheme 读取，通过 ThemeProvider 修改。
import { useState } from 'react';
import { styled, ThemeProvider, useTheme } from 'styled-components';
const Aaa = styled.div`
width: 100px;
height: 100px;
background: ${props => props.theme.dark ? 'black' : '#ccc'}
`
function Content() {
const theme = useTheme();
const [dark, setDark] = useState<boolean>(theme.dark);
return <>
<button onClick={() => setDark(!dark)}>切换</button>
<ThemeProvider theme={{ dark }}>
<Aaa></Aaa>
</ThemeProvider>
</>
}
function App() {
return <ThemeProvider theme={{ dark: true }}>
<Content></Content>
</ThemeProvider>
}
export default App;我们用 useTheme 读取了当前 theme，然后点击按钮的时候 setState 触发重新渲染，通过 ThemeProvider 修改了 theme 的值。
这就是 styled-components 的 theme 功能。
上面的过一遍，styled-components 就算掌握的差不多了
那最后我们来思考下，用 styled-components 有啥优缺点呢？
先来看下好处：
用了 styled-components 之后，你的 className 都是这样的：
没有样式冲突问题，不需要类似 CSS Modules 这种方案。
而且你可以用 js 来写样式逻辑，而且封装方式也是 React 组件的方式，这个是挺爽的。
不然你要学 scss 的函数的语法，比如这样：
@function multiple-box-shadow($n) {
$value: '#{random(2000)}px #{random(2000)}px #FFF';
@for $i from 2 through $n {
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
}
@return unquote($value);
}
#stars {
width: 1px;
height: 1px;
box-shadow: multiple-box-shadow(700);
}scss 的 for 循环、if else 还有函数等的语法都要单独学习。
相比之下，还是 styled-components 直接用 js 来写样式组件的逻辑更爽。
这就像很多人不喜欢 vue 的 template 写法，更喜欢 React 的 jsx 一样，可以直接用 js 来写逻辑。
当然，styled-components 也有不好的地方，比如：
你的 React 项目里会多出特别多样式组件：
随便找一个组件，一眼望去全是样式组件。
你的 React DevTools 里也是一堆 styled-components 的组件：
当然，这些也不是啥大问题，styled-components 整体还是很好用的。
案例代码上传了小册仓库
总结
CSS in JS 就是用 js 来写 css。
今天我们学习了最流行的 CSS in JS 库 styled-components。
它的特点就是样式组件，用 styled.div、styled() 可以创建样式组件。
样式组件可以传参数，可以通过 attrs() 修改参数。
通过 keyframes 来声明动画样式，通过 css 来复用某段样式，通过 createGlobalStyle 创建全局样式。
写样式的时候，通过 & 代表当前样式组件的实例，当样式和全局样式冲突的时候，还可以 && 提高优先级。
styled-components 还支持 theme，可以通过 ThemeProvider 修改 theme 值，通过 useTheme 来读取，每个样式组件里都可以通过 props.theme 拿到当前 theme，然后展示不同样式。
styled-components 相比 scss 等方案有好有坏：
- 没有 className 冲突问题，不需要 CSS Modules
- 用 js 来写逻辑，不需要学习单独的 scss 语法
- 项目里会多很多的样式组件，和普通组件混在一起
- React DevTools 里会有很多层的样式组件
总体来说，styled-components 还是很有不错，如果你喜欢通过 React 组件的方式来写样式这种方式，可以考虑使用。
我最近在维护的一个项目，用 styled-components 好多年了，大项目用也没问题。