Ant Design Style 教程

Ant Design Style 教程

antd-stylecss-in-js library with antd v5 token system项目地址:https://gitcode.com/gh_mirrors/an/antd-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 的简要教程，通过这些内容你应该能够开始使用并理解其核心概念了。进一步的学习和实践将帮助你更好地掌握这个库的能力。

antd-stylecss-in-js library with antd v5 token system项目地址:https://gitcode.com/gh_mirrors/an/antd-style