微软 Fluent UI 同款样式引擎：Griffel 用原子 CSS-in-JS，运行时插入却很小
Griffel 是驱动微软 Fluent UI 的样式引擎，走「原子化 CSS-in-JS」路线：你用 JS 对象描述样式，它在构建或运行时把相同声明合并成原子类，重复样式只插一次。相比传统运行时方案，样式表更小、插入更少，适合大型组件库场景。
它解决什么问题
传统 CSS-in-JS 同类样式重复插入，样式表越积越大。
大型组件库里样式体积失控，影响加载。
想要原子化去重，又习惯用 JS 对象写样式。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 原子化合并 | 相同样式声明归并成一个原子类，去重省体积 |
| 构建期支持 | 可配合构建插件在编译期抽样式，运行时更轻 |
| CSS-in-JS | 用 JS 对象写样式，组合与动态值方便 |
| React 友好 | 与 Fluent UI 同源，React 场景成熟 |
| 零全局污染 | 类名作用域隔离，避免样式互相覆盖 |
| 开源可查 | MIT 协议开源，源码公开易排查 |
它是「原子化」思路下的 CSS-in-JS 实现
Griffel 的关键动作是去重：当你在多处写了相同的样式声明，它不会生成多份规则，而是复用同一个原子类名。这样样式表随组件数量增长得慢，特别适合 Fluent UI 这种组件极多的库。配合构建插件时，原子类还能在编译期产出，进一步压低运行时成本。
它是通过 npm 安装的样式引擎，不是组件库，也不是复制源码。虽然从 React 生态走来、与 Fluent UI 绑定最深，但核心引擎并不强制 React。选用时若在意极致首屏，建议接好构建期抽样，而不是纯运行时插入。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Panda CSS | 开源免费 | 构建期原子化，零运行时，更偏框架无关。 |
| Emotion | 开源免费 | 运行时 CSS-in-JS 主流，灵活但无原子去重。 |
| vanilla-extract | 开源免费 | 零运行时 CSS-in-TS，产物为静态 CSS。 |
谁适合用
- 构建大型组件库、在意样式体积的前端
- 已用或想用 Fluent UI 的团队
- 喜欢用 JS 对象写样式、又要去重的开发者
怎么开始
- 用包管理器安装 @griffel/react 及核心包。
- 在组件里用 makeStyles 声明样式对象。
- 把生成的类名挂到元素上渲染。
- 按需接构建插件，把样式抽到编译期。
- 核对产物里原子类是否成功去重。
常见问题
依赖 Tailwind 吗？
不依赖。它是独立的原子化 CSS-in-JS 引擎。
是装库还是复制源码？
是装库，通过 npm 引入，跟随依赖升级。
必须配合 React 吗？
不必，核心引擎不强制 React，但 React 场景最成熟。
能商用吗？
能。以 MIT 开源协议发布，可自由用于商业项目。
授权与合规
Griffel 以 MIT 开源协议发布，源码公开，可自由用于商业与个人项目。 官网：griffel.js.org。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
英文
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
