超乎你想像的 styled-components

Published on:
Tags: cssinjs styled-components

Css 在 React 中的写法一直在持续改进，从原生的 Css 到 CSS Modules，再到 Css In Js，目标是让开发者更高效地写组件的样式。

styled-components 是基于 Css In Js 方式实现的一个库，刚开始看到这个库时，我简单地以为它只是使用了内联方式来实现 React 组件的样式，但试用了之后，才发现不仅它的实现不是内联的方式，而且因为样式是写在 JS 里面，所以它的强大远超过我的预期。

使用 ES6 的字符串模板

使用过 React 的同学可能比较清楚，如果要在一个组件通过 JS 来定义 css 样式，就必须在 React 组件里面通过style属性来写。 

1
const Home = () => <div style={{ marginLeft: 10 }}>Hello World</div>;

这种方式有很多缺点：

  • 样式属性与原生 css 的写法不一致，样式名称必须用驼峰的命名方式来命令，而不是多个单词用-号分隔；单位的写法也不一致，百分比是用字符串形式，而pixel值是用数字型形式。
  • 无法写伪元素，要实现hover的话就必须使用onMouseOver事件来实现，而且要写很多 JS 代码，像before和after这类伪元素则根本没法通过这种方式实现。

styled-components 最吸引开发者的是使用了 ES6 的字符串模板方式来定义 css 样式，这样使得 css 的写法与原生的 css 写法基本一致，克服了上述的缺点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  & hover: {
    color: blue;
  }

  & before: {
    ...
  }
`

那么 styled-components 的底层原理是什么？为什么通过 ES6 的字符串模板可以实现这种功能？感兴趣的同学可以看下下面推荐阅读的文章styled-components-magic-explained。

这里列举几个例子简单感受一下：

1
2
3
4
5
6
7
8
// 我们有个方法来打印方法参数
const logArgs = (...args) => console.log(...args)

const favoriteFood = 'pizza'
// 用正常的方法调用，输出结果跟预期一样，是一句完整的句子。
logArgs(`I like ${favoriteFood}.`) // -> I like pizza.
// 而用字符串模板的方式来调用方法，则会变成这样：句子会被变量分隔成 2 个字符串，变量值变成数组后面的参数。
logArgs`I like ${favoriteFood}.` // -> ["I like ", "."] "pizza"

生成一个随机的 class 名称

开始看到 styled-components 时我天真地以为它的样式是通过内联的方式放入到组件里面，其实不是，它的样式最终还是封装成一个 class 然后再放到组件里面。

这样不仅避免了内联样式的局限性，而且class 的名称是一个随机的字符串，这样也完美解决了 Css 的一个大难题：样式名称重复的问题。

Css In Js 的好处

使用 JS 来写 css 的好处，就是可以利用 JS 的语法来封装 CSS 对象，比如可以使用if语句来判断需要使用哪个样式值。

1
2
3
4
// 这里利用了 `styled-components` 的特性
const Button = styled.div`
  color: ${props => props.isActive ? 'blue': 'red'};
`;

或者通过一个方法来返回一个样式对象，通过参数来动态定义样式。

1
2
3
4
5
const Button = (color) => {
  return styled.div`
    color: ${color};
  `;
};

这个是不是很眼熟？有点像sass等 css 预处理器中的方法？没错！通过 JS 的特性就可以让你在 JS 中做预处理器中做的事情。

styled-components 的预处理工具

说到 CSS 的预处理器，其实 styled-components 也有一套用 JS 实现的预处理器工具库——polished，其中包括一些常用的 CSS 方法，比如 clearfix、hsl、mix 等，让开发者可以完全不再使用 css 预处理器来写 css 了。

theme 特性

styled-components 里面还有一个比较特别的特性是theme，它利用了 React 的context特性来传递其中的参数，可以让样式对象直接从最上层的组件传递到最下层的组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 首先定义一个`theme`样式对象
const styleGuide = {
  cloudy: '#F2F4F7',
  darkGray: '#4A637C',
  gray: '#7A8D9F',
  // ...more colors or mixins
};

return (
  // 将`theme`对象传递给上层组件`ThemeProvider`（这也是 `styled-components` 的一个 API），这样下层组件就可以通过"props.theme.gray"来引用其中的样式了
  <ThemeProvider theme={styleGuide}>
    <App>
      <Switch>
        <AuthRoute auth={auth} exact path="/" component={DashboardView} />
        <AuthRoute auth={auth} path="/profile" component={DashboardView} />
        <Route path="/login" component={LoginView} />
        <Route path="/logout" component={LogoutView} />
        {/* ...more routes */}
        <Route component={NotFoundView} />
      </Switch>
    </App>
  </ThemeProvider>
);

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  /* Color the border and text with theme properties */
  color: ${props => props.theme.darkGray};
  border: 2px solid ${props => props.theme.darkGray};
`;

可以对样式对象下面的子元素进行样式定义

在使用原生 css 的时候，经常会这样写样式。

1
2
3
4
5
6
7
.foo h1 {
  font-size: 16px;
}

.foo h2 {
  color: red;
}

很多 styled-components 新手（比如我）会为每个 h1 和 h2 定义一个样式对象，这样其实多写了很多代码，也没有必要，其实可以通过这种方式来定义子元素的样式。

1
2
3
4
5
6
7
8
9
const FooDiv = styled.div`
  & h1 {
    font-size: 16px;
  }

  & h2 {
    color: red;
  }
`;

独立样式文件

在一般的 React 组件中，样式和组件文件是分离的（比如 App.js 和 style.css），使用了 styled-components 后其实也可以沿用这种方式来组织文件，定义一个style.js文件来写样式对象，然后在组件文件中引入该样式文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// style.js
import styled from 'styled-components';

export const AppDiv = styled.div`
  display: flex;
  justify-content: space-between;
`;

// App.js
import React from 'react';
import * as css from './style';

const App = () => <css.AppDiv>Hello World</css.AppDiv>;
export default App;

缺点

不能用 stylelint 检查你的 Css 代码

在使用 styled-components 的过程中也会遇到一些问题，比如我们的项目会用stylelint来做样式代码的检查，但是使用了 styled-compoents 后就没办法让stylelint的规则生效了。

不能用 prettier 来格式化你的 Css 代码

现在prettier不仅可以帮你格式化 JS 代码，还可以格式化 CSS 代码，但如果使用了styled-components的话，JS 中的字符串模板内容没有办法使用prettier来格式化，这个也比较尴尬。

推荐阅读

赞赏

如果文章对您有所帮助，可以捐赠我喝杯咖啡😌，捐赠方式：

BTC 地址：3LYgSyf7ddMALwGWPQr3PY4wzjsTDdg1oV
ETH 地址：0x0C9b27c89A61aadb0aEC24CA8949910Cbf77Aa73
qrcode

文章已同步更新公众号，欢迎关注

qrcode

Comments