探索antd-style：企业级CSS-in-JS解决方案

探索antd-style：企业级CSS-in-JS解决方案

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

在现代前端开发中，CSS-in-JS已经成为一种流行的趋势，它不仅简化了样式管理，还提供了强大的动态样式能力。今天，我们要介绍的是一个基于Ant Design V5 Token System构建的企业级CSS-in-JS解决方案——antd-style。

项目介绍

antd-style是一个建立在Ant Design V5 Token System之上的CSS-in-JS解决方案，底层依赖于emotion。它不仅继承了Ant Design的设计哲学，还提供了丰富的功能和灵活的定制能力，使得样式开发更加高效和便捷。

项目技术分析

技术栈

• 底层技术：基于emotion，一个高性能的CSS-in-JS库。
• 设计系统：紧密集成Ant Design V5 Token System，确保样式的一致性和可维护性。

核心功能

• Token System集成：默认集成Ant Design V5 Token System，简化样式定制，灵活使用token。
• 一键暗黑模式切换：基于antd v5 cssinjs动态主题配置和暗黑主题算法封装，轻松实现亮暗主题切换。
• 灵活的自定义主题扩展：提供自定义token和自定义样式的功能，满足个性化需求。
• 平滑迁移：支持从less平滑迁移到CSS-in-JS，降低迁移成本。
• 微应用兼容性：默认兼容qiankun微应用，同时提供性能优化选项。
• 响应式设计：提供便捷的响应式应用工具函数，快速完成响应式主题开发。
• 样式组合：通过多个原子token的组合，实现复杂交互样式的组合，高度复用。

项目及技术应用场景

antd-style适用于各种需要高效、灵活样式管理的应用场景，特别是：

• 企业级应用：需要高度定制化和一致性设计的企业级应用。
• 微前端架构：在qiankun等微前端框架中，确保样式的一致性和兼容性。
• 响应式应用：需要快速开发响应式布局的应用。
• 旧项目迁移：需要从less迁移到CSS-in-JS的项目，降低迁移成本。

项目特点

• 集成度高：紧密集成Ant Design V5 Token System，确保样式的一致性和可维护性。
• 灵活性强：提供丰富的自定义选项，满足各种个性化需求。
• 性能优化：在兼容微应用的同时，提供性能优化选项，确保应用的流畅性。
• 开发体验好：提供详细的文档和应用示例，帮助开发者快速上手。

快速开始

安装

推荐使用pnpm进行安装：

pnpm i antd-style -S

典型用例

以下是一个简单的示例，展示如何使用antd-style创建样式：

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',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  card: css`
    box-shadow: ${token.boxShadow};
    padding: ${token.padding}px;
    border-radius: ${token.borderRadius}px;
    color: ${token.colorTextTertiary};
    background: ${token.colorBgContainer};
    transition: all 100ms ${token.motionEaseInBack};

    margin-bottom: 8px;
    cursor: pointer;

    &:hover {
      color: ${token.colorTextSecondary};
      box-shadow: ${token.boxShadowSecondary};
    }
  `,
}));

export default () => {
  const { styles, cx, theme } = useStyles();

  return (
    <div className={cx('a-simple-create-style-demo-classname', styles.container)}>
      <div className={styles.card}>createStyles Demo

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