fix(Breadcrumb): custom itemRender style for 6.x by guoyunhe · Pull Request #56253 · ant-design/ant-design

guoyunhe · 2025-12-17T06:43:02Z

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

The specific problem to be addressed.

List the final API implementation and usage if needed.

If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Read Keep a Changelog! Track your changes, like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	fix(Breadcrumb): custom itemRender style
🇨🇳 Chinese	fix(Breadcrumb): 自定义 itemRender 样式

bolt-new-by-stackblitz · 2025-12-17T06:43:05Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2025-12-17T06:43:10Z

github-actions · 2025-12-17T06:43:11Z

👁 Visual Regression Report for PR #56253 Failed ❌

🎯 Target branch: master (3d0a5b4)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 2 changed

Expected (Branch master)	Actual (Current PR)	Diff
table-sticky.dark.png	table-sticky.dark.png
table-sticky.default.png	table-sticky.default.png

Important

There are 2 diffs found in this PR: 🔄 2 changed.
Please check all items:

Visual diff is acceptable

gemini-code-assist · 2025-12-17T06:43:17Z

Summary of Changes

Hello @guoyunhe, I'm Gemini Code Assist¹! 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 resolves a styling inconsistency in the Breadcrumb component where custom itemRender functions could lead to incorrect or missing styles on individual breadcrumb items. By explicitly adding the ant-breadcrumb-item class to the <li> elements and refining the component's CSS selectors, the change guarantees that all breadcrumb items adhere to the intended design system, regardless of how they are rendered.

Highlights

Breadcrumb Item Styling: Ensured that the ant-breadcrumb-item class is consistently applied to the <li> elements within the Breadcrumb component, particularly when a custom itemRender function is used.
CSS Selector Refinement: Updated the CSS selectors in the Breadcrumb's style definition to target .ant-breadcrumb-item a and .ant-breadcrumb-item:last-child, making the styling more specific and robust.
Snapshot Updates: Numerous snapshot tests were updated across various Breadcrumb test files to reflect the new class structure, ensuring visual consistency and preventing regressions.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

coderabbitai · 2025-12-17T06:43:18Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

修复面包屑链接样式显示错误。更新了BreadcrumbItem组件的className构建逻辑，使用clsx合并样式类；同时调整了样式表中的选择器，使其更具体地针对面包屑项内的链接元素。

Changes

凝聚体 / 文件	变更摘要
面包屑项组件样式修复 `components/breadcrumb/BreadcrumbItem.tsx`	添加 clsx 导入，修改列表项渲染逻辑。当存在链接时，className 现在通过 clsx 合并前缀类（prefixCls-derived item class）与已有的 mergedClassNames?.item，而非仅使用后者，以修复样式应用问题。
面包屑样式选择器优化 `components/breadcrumb/style/index.ts`	将链接样式选择器从宽泛的面包屑链接分组改为更具体的面包屑项内锚点选择器；将 li:last-child 更新为 breadcrumb-item:last-child，使选择器与新的项基结构对齐。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

注意className合并逻辑的正确性，确保样式优先级符合预期
验证样式选择器变更在不同浏览器和主题下的表现一致性

Poem

🥕 面包屑链接色彩晕, 选择器调整显真容,
clsx 来相助, 合并类名展魔术,
细致选择范围收, 样式绽放正模样! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	描述与变更集相关，明确指出这是一个bug修复，关联issue #56248，并提供了中英文变更日志。
Linked Issues check	✅ Passed	PR中的代码变更直接解决了issue #56248中报告的问题：通过修改className的组合方式和CSS选择器，恢复v5.29.2中因变更而导致的面包屑链接颜色问题。
Out of Scope Changes check	✅ Passed	所有变更都与解决面包屑链接样式问题直接相关，包括BreadcrumbItem组件的className合并逻辑和样式选择器的更新，没有发现超出范围的改动。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	拉取请求标题准确反映了主要变更内容，即修复面包屑组件的自定义itemRender样式问题。

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request correctly fixes an issue with custom styling on Breadcrumb items by ensuring the base CSS class is always applied. The related CSS selectors are also improved for better specificity. The changes are solid, but I've noticed a related bug where className and style props on Breadcrumb.Item are ignored. I've included a suggestion to address this, which would make item-level customization more robust.

components/breadcrumb/BreadcrumbItem.tsx

pkg-pr-new · 2025-12-17T06:47:29Z

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@56253

commit: ba23d59

codecov · 2025-12-17T06:55:16Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (3d0a5b4) to head (ba23d59).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #56253   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          804       804           
  Lines        14841     14841           
  Branches      3922      3922           
=========================================
  Hits         14841     14841

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

codecov · 2025-12-17T07:09:00Z

Bundle Report

Changes will increase total bundle size by 430 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.86MB	430 bytes (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.min.js`	215 bytes	2.12MB	0.01%
`antd.min.js`	215 bytes	1.74MB	0.01%

Files in antd-with-locales.min.js:

./components/breadcrumb/style/index.ts → Total Size: 2.86kB

Files in antd.min.js:

./components/breadcrumb/style/index.ts → Total Size: 2.86kB

afc163 · 2025-12-17T07:52:47Z

components/breadcrumb/BreadcrumbItem.tsx

+        <li
+          className={clsx(`${prefixCls}-item`, mergedClassNames?.item)}
+          style={mergedStyles?.item}
+        >


@afc163 应该是因为自定义 itemRender 缺了 ${componentCls}-link 这个类，我修复一下

我看你的修复方式不是补 link 这个类，而是新增了 item 这个类，对么？

是的，因为 -link 类在自定义 itemRender 的情况下几乎肯定会丢，不可靠。而上一级 li 上的 -item 类是不变的。

guoyunhe added 2 commits December 17, 2025 14:35

fix(Breadcrumb): custom itemRender style

79525c5

test(Breadcrumb): update snapshots

ba23d59

gemini-code-assist bot reviewed Dec 17, 2025

View reviewed changes

components/breadcrumb/BreadcrumbItem.tsx Show resolved Hide resolved

guoyunhe changed the title ~~fix(Breadcrumb): custom itemRender style~~ fix(Breadcrumb): custom itemRender style for 6.x Dec 17, 2025

afc163 reviewed Dec 17, 2025

View reviewed changes

afc163 approved these changes Dec 17, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Dec 17, 2025

afc163 merged commit ab3569c into ant-design:master Dec 17, 2025
44 checks passed

chenshuai2144 mentioned this pull request Dec 23, 2025

docs: add 6.1.2 changeglog #56332

Merged

Uh oh!

Conversation

guoyunhe commented Dec 17, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Dec 17, 2025

Uh oh!

github-actions bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 17, 2025 • edited by afc163 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #56253 Failed ❌

Uh oh!

gemini-code-assist bot commented Dec 17, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

coderabbitai bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 17, 2025

Uh oh!

codecov bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

afc163 Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

guoyunhe Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Dec 17, 2025 •

edited

Loading

github-actions bot commented Dec 17, 2025 •

edited by afc163

Loading

coderabbitai bot commented Dec 17, 2025 •

edited

Loading

codecov bot commented Dec 17, 2025 •

edited

Loading

codecov bot commented Dec 17, 2025 •

edited

Loading

guoyunhe Dec 17, 2025 •

edited

Loading