关于css:cssinjs-从饱受争议到慢慢成为组件库的主流方案

css-in-js 是什么

开始前端风行 css html js 离开写，各自负责本人善于的款式、构造、行为，这叫关注点拆散，react 进去后，推出 jsx，在 js 中写 html，这样构造和行为都由 js 解决。React 对 CSS 封装非常简单，就是沿用了 DOM 的 style 属性对象。开始在 react 生态中有各种 css 集成的计划，css-in-js 是其中一种，开始提出时饱受争议，到当初眼看成为了支流。

css in js 是这样写的

import {makeStyles} from '@griffel/react';

const useClasses = makeStyles({icon: { color: 'red', paddingLeft: '5px'},
});

function Component() {const classes = useClasses();

  return <span className={classes.icon} />;
}

有几个用支流的组件库，都在用 css in js 计划。

应用 css-in-js 计划的组件库

Ant Design

Ant Design 5.0 版本从应用了很久的 less 切换到 css-in-js 计划，过后引起很多人的探讨，大家都认为 css-in-js 的计划减少了渲染工作，会影响组件的渲染性能。

ant-design-vue

Ant Design Vue 从 4.0 版本，款式集成计划也切换到 css-in-js。ant-design-vue 是应用比拟宽泛的 vue 框架的组件库，代表 vue 生态中也有一部分组件库也开始应用 css-in-js 计划。

MATERIAL-UI（Material Design React）

Material Design 谷歌的安卓设计规范，谷歌官网实现了 Angular 框架的 Material Design 组件库，MATERIAL-UI 是 react.js 社区版的组件库。

6.0 版本之前的款式计划

新版本款式计划

fluentui（fluent design react）组件库

fluentui 是微软依照本人的设计零碎 Fluent design 实现的 react 版本。

fluentui 的 css-in-js 计划是微软本人造的一个新轮子 griffel。

参考：

阮一峰 css in js
Material-UI
Ant design v5
fluentui repo
Fluent UI React v9