fix(ConfigProvider): use correct cssVar key for icon styles#56504
fix(ConfigProvider): use correct cssVar key for icon styles#56504afc163 merged 2 commits intoant-design:masterfrom
Conversation
|
|
Summary of ChangesHello @seanparmelee, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a critical bug in Ant Design's Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
|
👁 Visual Regression Report for PR #56504 Failed ❌
Important There are 1 diffs found in this PR: 🔄
|
📝 WalkthroughSummary by CodeRabbit发布说明
✏️ Tip: You can customize this high-level summary in your review settings. 功能概述本次变更在 ConfigProvider 中重构了图标样式的处理逻辑，将直接的 useStyle 调用提取为独立的 IconStyle 组件，并添加新的测试用例验证自定义 CSS 变量键的正确应用。 变更清单
代码审查工作量🎯 2 (Simple) | ⏱️ ~8 分钟 庆祝诗
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Code Review
This pull request effectively resolves an issue where icon styles did not respect the cssVar.key from the theme configuration in ConfigProvider. The approach of creating a dedicated IconStyle component and rendering it within the DesignTokenContext.Provider is a clean and correct solution. The added test case is also valuable for preventing future regressions. I've added one suggestion for a minor performance optimization by memoizing the new IconStyle component.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
components/config-provider/index.tsx (1)
94-104: 组件实现正确，建议添加性能优化。IconStyle 组件结构正确，注释清晰地解释了其目的。由于
iconPrefixCls和csp通常不会频繁变化，建议使用React.memo包装该组件以避免不必要的重新渲染。🔎 建议的性能优化
/** * This component registers icon styles inside the DesignTokenContext.Provider * so that CSS variables use the correct cssVar key from the theme config. */ -const IconStyle: React.FC<{ iconPrefixCls: string; csp?: CSPConfig }> = ({ +const IconStyle: React.FC<{ iconPrefixCls: string; csp?: CSPConfig }> = React.memo(({ iconPrefixCls, csp, }) => { useStyle(iconPrefixCls, csp); return null; -}; +});components/config-provider/__tests__/cssinjs.test.tsx (1)
99-124: 测试用例实现良好，验证了修复效果。该测试用例成功验证了图标样式使用正确的
cssVar.key配置：
- 正向断言：确认包含自定义的
.custom-css-var类- 反向断言：确认不包含默认的
.css-var-root类测试遵循了文件中其他测试的模式，断言清晰且注释有帮助。
可选的测试增强建议
可以考虑添加以下测试场景以提高覆盖率：
- 验证图标是否实际渲染：
const { container } = render( <ConfigProvider theme={{ cssVar: { key: 'custom-css-var' } }}> <SmileOutlined /> </ConfigProvider>, ); expect(container.querySelector('.anticon')).toBeTruthy();
- 测试未提供 cssVar 时的默认行为，确保向后兼容性：
it('icon styles should use default cssVar key when not configured', () => { render( <ConfigProvider> <SmileOutlined /> </ConfigProvider>, ); const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]')); expect( dynamicStyles.some((style) => style.innerHTML.includes('.css-var-root')), ).toBeTruthy(); });
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/config-provider/__tests__/cssinjs.test.tsxcomponents/config-provider/index.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/config-provider/__tests__/cssinjs.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/config-provider/__tests__/cssinjs.test.tsx
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2025-06-28T20:50:03.555Z
Learnt from: li-jia-nan
Repo: ant-design/ant-design PR: 54219
File: .dumi/theme/builtins/RefinedChangelog/index.tsx:65-65
Timestamp: 2025-06-28T20:50:03.555Z
Learning: React 19 introduces a simplified Context provider syntax that allows using Context objects directly (e.g., `<ChangelogContext value={...}>`) instead of requiring the `.Provider` suffix (e.g., `<ChangelogContext.Provider value={...}>`).
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2025-06-28T20:50:03.555Z
Learnt from: li-jia-nan
Repo: ant-design/ant-design PR: 54219
File: .dumi/theme/builtins/RefinedChangelog/index.tsx:65-65
Timestamp: 2025-06-28T20:50:03.555Z
Learning: React 19 introduces simplified Context provider syntax allowing direct usage of Context objects (e.g., `<MyContext value={...}>`) instead of requiring `.Provider` suffix (e.g., `<MyContext.Provider value={...}>`). The old `.Provider` syntax will be deprecated in future React versions.
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Place component styles in `style/` directory
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/config-provider/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/config-provider/index.tsxcomponents/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/config-provider/__tests__/cssinjs.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/config-provider/__tests__/cssinjs.test.tsx
🧬 Code graph analysis (2)
components/config-provider/index.tsx (2)
components/config-provider/context.ts (1)
CSPConfig(84-86).dumi/theme/slots/Content/DocAnchor.tsx (1)
useStyle(8-61)
components/config-provider/__tests__/cssinjs.test.tsx (2)
components/badge/demo/component-token.tsx (1)
ConfigProvider(6-32).dumi/scripts/mirror-notify.js (1)
style(31-31)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
- GitHub Check: build preview
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test lib/es module (lib, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build
- GitHub Check: test-node
- GitHub Check: lint
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build
- GitHub Check: size
🔇 Additional comments (1)
components/config-provider/index.tsx (1)
604-604: 组件放置位置正确。IconStyle 组件被正确地放置在 childNode 中，确保它在 DesignTokenContext.Provider（第 701-705 行）建立后渲染。这样可以保证 useStyle 钩子能够访问到正确的 cssVar 配置，修复了图标样式使用默认 CSS 变量键的问题。
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56504 +/- ##
===========================================
Coverage 100.00% 100.00%
===========================================
Files 807 805 -2
Lines 17819 14847 -2972
Branches 5107 3920 -1187
===========================================
- Hits 17819 14847 -2972 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 3.05kB (0.03%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
|
🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR). 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。 
|
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
When using AntD v6 in zero runtime mode w/ static-style-extract, we need to specify a
cssVar.keyso it has a deterministic value at both build time and run time. I noticed, however, that even withthe output still contains a
css-var-rootclass with all the default theme css variables.The root cause is the
useStylecall for icon styles is executed inside theConfigProvidercomponent body but before theDesignTokenContext.Provideris rendered. This causesuseToken()to read from the parent/default context (which has nocssVar), falling back to the hardcodedcss-var-rootkey.To address this, this PR moves the icon style registration into a small
IconStylecomponent that renders insidechildNode, ensuring it executes after theDesignTokenContext.Provideris established and uses the correctcssVarcontext.📝 Change Log
cssVarkey from theme configcssVar键。