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 提供 api。
快速上手
安装
推荐使用 pnpm 安装
pnpm i antd-style -S使用
antd-style 结合 emotion 使用，需要在项目中使用 emotion 依赖。
场景介绍
场景一：消费 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