Ant Design StyleAnt Design Style
快速上手
最佳实践
API
更新日志
⌘ K

Table of Contents

动机 | 为什么会有这个库
特性 | 它能干什么
它和 @ant-design/cssinjs 的区别是什么?
基础知识
简介
CSS in JS 快速入门
CSS in JS 写法对比
设计理念与实施策略
快速上手
书写样式
切换主题
自定义主题
进阶使用
Babel 插件
SSR 集成
组件研发
集成 styled
🚧 stylish 复合样式
CSSinJS 样式库性能对比
从 Less 迁移
Less 应用自动化迁移
Less 应用手动迁移
Less 组件迁移
🚧 CSSinJS 与 Less 的编译差异
下一篇
CSS in JS 快速入门

相关资源

Ant Design
Ant Design Pro
Ant Design Pro Components
Umi-React 应用开发框架
Dumi-组件/文档研发工具
qiankun-微前端框架

社区

Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-SEE Conf-蚂蚁体验科技大会

帮助

GitHub
更新日志
讨论

more products更多产品

yuque语雀-知识创作与分享工具
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
Copyright © 2022-2024
Made with ❤️ by 蚂蚁集团 - AFX & 数字科技
‌
‌
‌
‌

简介

antd-style 是基于 Ant Design V5 Token System 构建的业务级 css-in-js 解决方案,它基于 emotion 二次封装。

动机 | 为什么会有这个库

antd v5 已正式发布,通过 CSSinJS 的技术带来了无与伦比的主题自定义能力,这也是我们所认为的未来方向。但目前来看,无论是内部落地应用,还是社区的相关反馈,关于 antd v5 token 系统如何使用、less 怎么迁移、应用如何集成 cssinjs 等问题,都让应用开发者较难开始使用 CSSinJS 的技术来书写样式。

antd 作为一个组件库,它的职责和边界只在于提供高品质的基础组件,应用层如何使用样式方案, antd 并不限制。开发者可以使用 less/sass、styled-component 等方案都没有任何问题。 但为了将 v5 的 token 系统的推行变得更加顺利,我们需要提供一个使用 antd token 系统的最佳实践,帮助应用开发者更低门槛在应用中集成 CSSinJS 技术方案,享受新技术所带来的 UX 和 DX 升级。

特性 | 它能干什么

它具备以下特性:

内置 antd token

内置 antd token

默认集成 Ant Design V5 的 Token System,主题定制轻而易举,token 消费灵活易用

立即了解
暗色模式一键切换

暗色模式一键切换

我们基于 antd v5 cssinjs 动态主题配置与暗色主题算法,为应用级场景封装了简单易用的亮暗色主题切换能力,使用便捷,上手简单。

立即了解
复合样式 —— Stylish

复合样式 —— Stylish

Ant Design Style 提供了复合样式的能力,我们称它为 Stylish。Stylish 可以通过组合多个原子 token 来组织形成复杂的交互样式,实现样式片段的复用度。

立即了解
主题灵活扩展

主题灵活扩展

Ant Design Style 提供自定义 token 与 自定义 stylish 的功能,当 antd 默认的 token 不能满足样式诉求时,可以灵活扩展出自己的主题体系,并在 CSS in JS 中自由消费。

立即了解
less 平滑迁移

less 平滑迁移

旧项目需要迁移?使用 antd-style 可以将项目中的 less 较低成本地迁移到 CSS in JS,并获得更好的用户体验与开发体验。

立即了解
微应用良好兼容

微应用良好兼容

Ant Design Style 默认兼容 qiankun 微应用(但会牺牲一点性能)。同时,为不需要微应用的场景提供性能优化选项。

响应式轻松适配

响应式轻松适配

Ant Design Style 将为响应式应用提供便捷的工具函数,帮助开发者快速完成响应式主题开发。

它和 @ant-design/cssinjs 的区别是什么?

@ant-design/cssinjs 是实现 antd 组件库的一套 cssinjs 方案,它通过比较繁琐的写法换得了相比 styled-component 和 emotion 都要好很多的性能。详见:组件级别的 CSS-in-JS。但对应用和基于 antd 封装的组件库中,这种写法可能过于繁琐和复杂,且缺少消费 antd token 系统的能力。

所以 antd-style 的适用场景是业务应用和基于 antd 二次封装的组件库,它会提供这两个场景所需要的所有能力。