Ant Design Style 教程

最新推荐文章于 2025-03-25 19:10:11 发布

丁骥治

最新推荐文章于 2025-03-25 19:10:11 发布

阅读量1.1k

点赞数 16

本文链接：https://blog.csdn.net/gitblog_01046/article/details/140973292

版权

Ant Design Style 教程

项目地址: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;