Package Exports

antd-style
antd-style/es/index.js
antd-style/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (antd-style) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

【Beta】当前处于 Beta 阶段

antd-style

简介

基于 Ant Design V5 Token System 构建的业务级 css-in-js 解决方案。底层基于 styled-component 和 emotion 封装。

🧩 Token System: 默认集成 Ant Design V5 的 Token System，风格定制轻而易举，token 消费灵活易用；
🌓 暗色模式一键切换: 基于 antd v5 cssinjs 动态主题配置与暗色主题算法封装了，为应用级场景提供易用的亮暗色主题切换能力，使用方式更加简单；
🪴 Stylish: Ant Design Style 提供了复合样式的能力，我们称它为 Stylish。Stylish 可以通过组合多个原子 token 来组织形成复杂的交互样式，实现极高的复用度；
🎨 灵活扩展自定义主题: Ant Design Style 提供自定义 token 与自定义 stylish 的功能，当 antd 默认的 token 不能满足样式诉求时，可以灵活扩展出自己的主题体系，并在 CSS in JS 中自由消费；
🏂 less 平滑迁移: 旧项目需要迁移？使用 antd-style 可以将项目中的 less 较低成本地迁移到 CSS in JS，并获得更好的用户体验与开发体验；
☯️ 微应用良好兼容: Ant Design Style 默认兼容 qiankun 微应用（但会牺牲一点性能）。同时并为不需要微应用的使用场景提供性能优化选项；
📱 响应式轻松适配: Ant Design Style 将为响应式应用提供便捷的工具函数，帮助开发者快速完成响应式主题开发；
🌰 文档与应用案例: 展示使用 Ant Design Style 的组件、应用的各种案例，帮助开发者快速上手。(本文档同样使用 Ant Design Style 构建样式)

快速上手

安装

推荐使用 pnpm 安装

pnpm i antd-style@beta -S

典型使用场景

创建样式

import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token, css }) => ({
  // 支持 css object 的写法
  container: {
    backgroundColor: token.colorBgLayout,
    maxWidth: 400,
    width: '100%',
    height: 180,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    marginLeft: 'auto',
    marginRight: 'auto',
    borderRadius: token.borderRadiusLG,
  },
  // 也支持通过 css 字符串模板获得和 普通 css 一致的书写体验
  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 () => {
  // styles 对象在 useStyles 方法中默认会被缓存，所以不用担心 re-render 问题
  const { styles, cx, theme } = useStyles();

  return (
    // 使用 cx 可以组织 className
    <div className={cx('a-simple-create-style-demo-classname', styles.container)}>
      <div className={styles.card}>createStyles Demo</div>
      {/* theme 对象包含了所有的 token 与主题等信息 */}
      <div>当前主题模式：{theme.appearance}</div>
    </div>
  );
};

场景二：使用 styled 搭配 Token 创建自定义样式的组件

import styled from '@emotion/styled';

const Card = styled.div<{ primary?: boolean }>`
  border-radius: ${(p) => p.theme.borderRadiusLG}px;
  padding: ${(p) => p.theme.paddingLG}px;

  background: ${(p) => (p.primary ? p.theme.colorPrimary : p.theme.colorBgContainer)};
  color: ${(p) => (p.primary ? p.theme.colorTextLightSolid : p.theme.colorText)};
`;

const App = () => {
  return (
    <div>
      <Card>普通卡片</Card>
      <Card primary>强调卡片</Card>
    </div>
  );
};

CHANGELOG

详情：CHANGELOG

License

MIT