Skip to content

✨ feat: support antd v6 cssVar #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

✨ feat: support antd v6 cssVar #198

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cd838b0
:sparkles: feat: support antd v6 cssVar
arvinxx Jul 24, 2025
35732f5
:wrench: chore: bump the infra
arvinxx Jul 24, 2025
a1bd816
update workflow
arvinxx Jul 24, 2025
cb9936f
fix lint
arvinxx Jul 24, 2025
968626e
fix test coverage
arvinxx Jul 24, 2025
b922a94
fix snapshot
arvinxx Jul 24, 2025
f739af5
:bookmark: chore(release): v4.0.0-alpha.1 [skip ci]
semantic-release-bot Jul 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/demos/api/createStyles/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,29 @@ import { SmileOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token, css, cx }) => {
const useStyles = createStyles(({ cssVar, css, cx }) => {
const commonCard = css`
border-radius: ${token.borderRadiusLG}px;
padding: ${token.paddingLG}px;
border-radius: ${cssVar.borderRadiusLG};
padding: ${cssVar.paddingLG};
`;

return {
container: css`
background-color: ${token.colorBgLayout};
background-color: ${cssVar.colorBgLayout};
padding: 24px;
`,

defaultCard: css`
${commonCard};
background: ${token.colorBgContainer};
color: ${token.colorText};
background: ${cssVar.colorBgContainer};
color: ${cssVar.colorText};
`,

primaryCard: cx(
commonCard,
css`
background: ${token.colorPrimary};
color: ${token.colorTextLightSolid};
background: ${cssVar.colorPrimary};
color: ${cssVar.colorTextLightSolid};
`,
),
};
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
"@types/testing-library__jest-dom": "^5.14.9",
"@umijs/lint": "^4.1.5",
"@vitest/coverage-v8": "0.34.6",
"antd": "^5.21.1",
"antd": "^6.0.0-alpha.1",
"babel-plugin-antd-style": "^1.0.4",
"chalk": "^4.1.2",
"classnames": "^2.5.1",
Expand Down Expand Up @@ -136,7 +136,7 @@
"zustand": "^4.5.2"
},
"peerDependencies": {
"antd": ">=5.8.1",
"antd": ">= 6.0.0-alpha.1",
"react": ">=18"
},
"publishConfig": {
Expand Down
4 changes: 3 additions & 1 deletion src/factories/createStyles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ export const createStylesFactory =

// 函数场景
if (styleOrGetStyle instanceof Function) {
const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, ...token } = theme;
const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, cssVar, ...token } =
theme;

// 创建响应式断点选择器的工具函数
// @ts-ignore
Expand All @@ -74,6 +75,7 @@ export const createStylesFactory =
isDarkMode,
prefixCls,
iconPrefixCls,
cssVar,
// 工具函数们
cx,
css: serializeCSS,
Expand Down
1 change: 1 addition & 0 deletions src/factories/createStyles/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface CreateStylesUtils extends CommonStyleUtils {
* 包含 antd 的 token 和所有自定义 token
*/
token: FullToken;
cssVar: FullToken;
stylish: FullStylish;
/**
* ThemeProvider 下当前的主题模式
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/useAntdTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useMemo } from 'react';

import { AntdTheme } from '@/types';
import { theme } from 'antd';
import { useAntdStylish } from './useAntdStylish';
import { useAntdToken } from './useAntdToken';

export const useAntdTheme = (): AntdTheme => {
const token = useAntdToken();
const { token, cssVar } = theme.useToken();
Copy link

@coderabbitai coderabbitai bot Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

验证 theme.useToken() 返回 cssVar

确认 antd v6.0.0-alpha.1 的 theme.useToken() 确实返回 cssVar 属性。

🌐 Web query:

Does Ant Design v6.0.0-alpha.1 theme.useToken() method return cssVar property?

💡 Result:

In Ant Design v6.0.0-alpha.1, the theme.useToken() method does not return CSS variables directly. Instead, it provides JavaScript objects containing the resolved token values. This approach allows for dynamic theming and customization within your React components.

However, it's important to note that Ant Design's theming system does not natively support the use of CSS variables within tokens. This limitation arises because the theming algorithm does not interpret CSS variables, which can lead to issues when attempting to use them in tokens. (github.com)

To incorporate CSS variables into your Ant Design theming, you can utilize the @ant-design/cssinjs package. This package enables the use of CSS variables in your styles, providing a more flexible and dynamic theming solution. By integrating @ant-design/cssinjs, you can define your theme tokens as CSS variables and apply them throughout your application. (github.com)

In summary, while theme.useToken() in Ant Design v6.0.0-alpha.1 does not return CSS variables, you can achieve CSS variable-based theming by incorporating the @ant-design/cssinjs package into your project.

Citations:

修复 theme.useToken() 解构

Ant Design v6.0.0-alpha.1 中，theme.useToken() 并不返回 cssVar 属性，直接解构会导致 cssVar 值为 undefined。

请处理以下位置：

  • 文件：src/hooks/useAntdTheme.ts
    行号：8
    当前： 
    const { token, cssVar } = theme.useToken();
    建议：
    • 若不依赖 CSS 变量，将解构改为： 
      const { token } = theme.useToken();
    • 若需使用 CSS 变量，请安装并配置 @ant-design/cssinjs，并通过其 API 获取 cssVar（例如在入口文件或主题配置中启用 CSSinJS 变量支持）。
🤖 Prompt for AI Agents 
In src/hooks/useAntdTheme.ts at line 8, theme.useToken() is destructured to get
cssVar, but in Ant Design v6.0.0-alpha.1 cssVar is not returned and will be
undefined. To fix this, remove cssVar from the destructuring and only extract
token if CSS variables are not needed. If CSS variables are required, set up
@ant-design/cssinjs properly and obtain cssVar through its API instead of
directly from theme.useToken().

const stylish = useAntdStylish();

return useMemo(() => ({ ...token, stylish }), [token, stylish]);
return useMemo(() => ({ ...token, stylish, cssVar }), [token, stylish, cssVar]);
};
Loading