CSS in JS 快速入门#
什么是 CSS in JS#
在思想上 CSSinJS 和 JSX 差不多，简单来说，就是在 JS 环境中写 CSS 相关的样式。利用 JS 本身的动态性，可以实现非常灵活的样式能力。本文不再做一些基础介绍，如果对 CSS in JS 缺乏前置了解的同学，可以在看一些社区上相关的文章：
如果有更好的学习资料，欢迎提 PR。
常见写法#
我们来看看在 CSS in JS 的世界中，目前总共有的 4 种样式书写方式。我们先不对这些写法做评价，通过了解一下一些主流的方案，你会对后续的介绍更有体感。
方式 1. styled#
styled 由 styled-components 首创，写法如下：
import styled from 'styled-component';
import { List } from 'xxx';
// 创建样式组件
const StyledList = styled(List)`
border: 1px solid ${(p) => p.theme.colorPrimary};
border-radius: 2px;
box-shadow: 0 8px 20px ${(p) => p.theme.colorShadow};
`;
const App: FC = ({ list }) => {
return (
// 引用组件
<StyledList dataSource={list} />
);
};
后续 emotion 在 @emotion/styled也做了跟进，因此主流 CSSinJS 库基本都支持这种写法。我们实测基于 styled 这种写法，将 styled-component 与 @emotion/react 两个包互切，样式没有任何影响，且性能相差无几。
但需要注意的是，styled-component 中一些默认支持的语法（例如：组件选择器），在 @emotion/react 中需要配置 babel 插件才可支持。因此 styled-components 的包体积会相较于 @emotion/react 大上不少。
方式 2. css 搭配 className#
第二种使用方式则由 emotion 提出，核心是 css 方法。
import { css } from '@emotion/css';
// 创建样式名
const className = css`
color: #1677ff;
`;
// -> css-abcdef
const App: FC = ({ list }) => {
return (
// 引用 classname
<List dataSource={list} className={className} />
);
};
这里需要额外提出的一点，css 对象不但支持 css 字符串 ，也支持 css 对象的写法。
import { css } from '@emotion/css';
const stringCls = css`
color: #1677ff;
border-radius: 2px;
`;
const objCls = css({
color: '#1677FF',
borderRadius: 2,
});
// stringCls 与 objCls 等效 -> css-xxx
如果要使用与 styled 一致的动态效果，需要将 css 放入函数中执行，进而得到动态性。
import { css } from '@emotion/css';
import { theme } from 'antd';
const useStyles = () => {
const { token } = theme.useToken();
return css`
border: 1px solid ${token.colorPrimary};
border-radius: 2px;
box-shadow: 0 8px 20px ${token.colorShadow};
`;
};
const App: FC = ({ list }) => {
const className = useStyles();
return (
// 引用组件
<List dataSource={list} className={className} />
);
};
方式 3. 在 React 中使用的 css props#
在 @emotion/react 中还额外提供了 css props 的写法。这是第三种方式，也是 emotion 推荐的在 React 中使用的方式。
/** @jsx jsx */
import { theme } from 'antd';
const App: FC = ({ list }) => {
const { token } = theme.useToken();
return (
<List
dataSource={list}
// 直接书写 css props
css={{
color: token.colorPrimary,
borderRadius: 2,
}}
/>
);
};
此外，在其他 css in js 库中，还有很多玩的花的方案，例如 stitches ，但限于篇幅，不再一一列举。
到此，大家应该对于如何书写 cssinjs 有了基本的认知。下一篇将会和大家详细分析各种写法的优劣，并给出 antd-style 的选择。
工程化支持#
CSS in JS 技术经过四五年的发展，目前大部分 IDE 都已经对 CSS in JS 有了良好的支持，因此在书写的时候，体验基本和普通 css 不会有太大的差别。
VS Code#
针对 VS Code 的用户，需要安装 vscode-styled-components 插件，可以实现自动提示。这个插件可以同时对 styled-component 和 emotion 生效。
Webstorm#
Webstorm 对 CSS in JS 提供了默认支持。如果你是 Webstorm 用户，什么也不需要做， CSS in JS 的所有智能提示和代码补全开箱即用。
Ant Design Token VSCode 插件#
社区同学 shezhangzhang 为 Ant Design V5 的 Token 系统研发了 VSCode 插件，可以在 VSCode 中直接看到 Token 提示。
