Package Exports
- antd-style
- antd-style/es/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
antd-style
简介
基于 Ant Design V5 Token System 构建的业务级 css-in-js 解决方案。目前基于 emotion 提供进行封装。
快速上手
安装
推荐使用 pnpm 安装
pnpm i antd-style -S典型使用场景
场景一：消费 token
import { css, useToken } from 'antd-style';
export const useStyle = () => {
const token = useToken();
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