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

Table of Contents

Usage
Transformation Logic
Notes
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
PREV
Performance Comparison of CSS-in-JS Libraries
NEXT
Manual Migration of Less Applications

相关资源

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 & 数字科技
‌
‌
‌
‌

Migrate Less Applications with Codemod

To facilitate the unified upgrade of business applications, we provide a one-click migration codemod from less to antd-style.

Usage

Simply execute the following command in the project root directory:

bash

Where src is the project directory.

Transformation Logic

In this codemod, we will perform the following transformations:

For less files:

  1. Create a new [file].style.ts file, where file is the name of the less file.
  2. Convert the styles in the less file to the css object syntax in antd-style.
  3. Flatten the nested syntax in less to a single level.
  4. Automatically replace less variables with antd-style tokens.

For ts files:

  1. Replace import less with import useStyles from '[file].style'.
  2. Add const { style } = useStyles().

Notes

TBD