/antd-style

css-in-js library with antd v5 token system

Primary LanguageTypeScriptMIT LicenseMIT

antd-style

NPM version NPM downloads install size

Test CI status Rlease CI Coverage

docs by dumi Build With father

简介

基于 Ant Design V5 Token System 构建的业务级 css-in-js 解决方案。

基于 emotion 二次封装。

  • Ant Design Token System：
  • 自定义主题：
  • 收敛而确定的用法：与 Css Modules 基本一致的
  • 超强扩展性：

快速上手

安装

推荐使用 pnpm 安装

pnpm i antd-style -S

典型使用场景

场景一：消费 token

import { css, useTheme } from 'antd-style';

export const useStyle = () => {
  const token = useTheme();
  return css`
    color: ${token.colorPrimary};
  `;
};

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

import { styled } from 'antd-style';

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