Ant Design Style 教程
1. 项目介绍
Ant Design Style 是一个基于 Ant Design V5 Token System 构建的业务级 CSS-in-JS 解决方案。它利用 emotion 进行了二次封装,旨在提供强大的主题定制能力和高度可复用的样式系统。此库旨在简化从 Less 到 CSS-in-JS 的迁移过程,并确保与微前端框架如 qiankun 的良好兼容性,同时支持响应式设计。
2. 项目快速启动
安装
首先,确保你已安装 Node.js 并全局安装 pnpm(或选择其他包管理器):
npm install -g pnpm
接下来,在你的项目中安装 Ant Design Style:
pnpm add antd-style -S
使用示例
导入 createStyles
函数并创建样式:
import { createStyles } from 'antd-style';
const useStyles = createStyles(([token, css]) => ({
container: {
backgroundColor: token.colorBgLayout,
borderRadius: token.borderRadiusLG,
maxWidth: 400,
width: '100%',
height: 180,
display: 'flex',
},
// 更多样式...
}));
function MyComponent() {
const classes = useStyles();
return <div className={classes.container}>...</div>;
}
export default MyComponent;
3. 应用案例和最佳实践
- Stylish:利用 Ant Design Style 的 "Stylish" 特性,可以通过组合原子令牌创建复杂交互样式,实现高重用度。
- 主题扩展:当默认的 Ant Design 样式令牌不能满足需求时,可以灵活扩展自己的主题系统并在 CSS-in-JS 中自由消费。
- 平滑迁移:对于旧项目,可以低成本地将其中的 Less 代码迁移到 CSS-in-JS,提供更好的用户体验和开发体验。
- 响应式设计:Ant Design Style 提供方便的工具函数以助于快速完成响应式主题的开发。
4. 典型生态项目
- Ant Design:基础 UI 组件库,Ant Design Style 与其紧密配合。
- Ant Design Pro:高级 React 应用模板,演示了在实际项目中的用法。
- Umi:React 应用开发框架,为 Ant Design Style 提供良好的集成环境。
- Dumi:用于组件/文档研发的工具,可以帮助构建高质量的文档。
- Qiankun:微前端框架,支持 Ant Design Style 的无缝集成。
以上就是关于 Ant Design Style 的简要教程,通过这些内容你应该能够开始使用并理解其核心概念了。进一步的学习和实践将帮助你更好地掌握这个库的能力。