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