Ant Design StyleAnt Design Style
Quick Start
Best Practices
API Reference
Release Notes
⌘ K

Table of Contents

Motivation | Why this library exists
Features | What it can do
What is the difference between it and @ant-design/cssinjs?
Basic Knowledge
Introduction
Quick Start to CSS in JS
Comparison of CSS in JS Writing Methods
Design Philosophy and Implementation Strategy
Quick Start
Writing Style
Theme Switching
Custom Theme
Advanced Usage
Babel Plugin
SSR Integration
Component Development
Integrated styled
🚧 Stylish Composite Styles
Performance Comparison of CSS-in-JS Libraries
Migrating from Less
Less Application Automated Migration
Manual Migration of Less Applications
Migrating Less Components
🚧 Compilation Differences Between CSS-in-JS and Less
NEXT
Quick Start to 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 & 数字科技
‌
‌
‌
‌

Introduction

antd-style is a business-level css-in-js solution built on the Ant Design V5 Token System, and it is based on the secondary encapsulation of emotion.

Motivation | Why this library exists

Antd v5 has been officially released, bringing unparalleled theme customization capabilities through the CSSinJS technology, which we believe is the future direction. However, at present, both internal application landing and community feedback on how to use the antd v5 token system, how to migrate from less, and how to integrate cssinjs into applications have made it difficult for application developers to start using the CSSinJS technology to write styles.

As a component library, antd's responsibility and boundary are only to provide high-quality basic components, and it does not restrict how the application layer uses style solutions. Developers can use less/sass, styled-component, and other solutions without any problems. However, in order to make the promotion of the v5 token system smoother, we need to provide a best practice for using the antd token system, helping application developers to integrate the CSSinJS technology solution into applications with lower thresholds, and enjoy the UX and DX upgrades brought by new technologies.

Features | What it can do

It has the following features:

内置 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 将为响应式应用提供便捷的工具函数，帮助开发者快速完成响应式主题开发。

What is the difference between it and @ant-design/cssinjs?

@ant-design/cssinjs is a cssinjs solution for implementing the antd component library. It achieves much better performance compared to styled-component and emotion through a more cumbersome syntax. See: Component-level CSS-in-JS. However, for applications and component libraries based on antd, this syntax may be too cumbersome and complex, and lacks the ability to consume the antd token system.

Therefore, the applicable scenarios for antd-style are business applications and component libraries based on antd secondary encapsulation, providing all the capabilities needed for these two scenarios.