fix(Modal): fix confirm icon style when using third-party icons #48490
Conversation
|
|
|
|
👁 Visual Regression Report for PR #48490 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
guoyunhe
force-pushed
the
fix-modal-icon-color
branch
from
4770e45
to
50ed643
Compare
guoyunhe
changed the title
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
给个重现先 |
|
@afc163 复现 demo https://stackblitz.com/edit/react-xkiawf?file=demo.tsx 第三方图标的尺寸和颜色都不对
|
guoyunhe
force-pushed
the
fix-modal-icon-color
branch
from
50ed643
to
e7651f0
Compare
guoyunhe
force-pushed
the
fix-modal-icon-color
branch
from
e7651f0
to
0278c79
Compare
| @@ -142,7 +142,7 @@ export function ConfirmContent( | |||
| [`${bodyCls}-has-title`]: hasTitle, | |||
| })} | |||
| > | |||
| {mergedIcon} | |||
| <div className={`${confirmPrefixCls}-icon`}>{mergedIcon}</div> | |||
There was a problem hiding this comment.
| <div className={`${confirmPrefixCls}-icon`}>{mergedIcon}</div> | |
| {cloneElement(mergedIcon, { | |
| className: 'anticon', | |
| })} |
直接这样改如何？
There was a problem hiding this comment.
@afc163 这样会覆盖掉原本的 icon 的 className 吧，而且也有可能组件不支持外部传入 className
There was a problem hiding this comment.
- 我试了一下不会覆盖。
- 常用的图标组件都会支持 className 的，这个应该是标配。
There was a problem hiding this comment.
效果相同的情况下，感觉使用 cloneElement 会更慢。
There was a problem hiding this comment.
任何 clone 的过程都是耗时的。而且 React 官方文档里并不推荐用 cloneElement https://react.dev/reference/react/cloneElement
Using cloneElement is uncommon and can lead to fragile code.
| @@ -44,7 +44,8 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => { | |||
| flexWrap: 'nowrap', | |||
| alignItems: 'start', | |||
|
|
|||
| [`> ${token.iconCls}`]: { | |||
| [`> ${confirmComponentCls}-icon`]: { | |||
There was a problem hiding this comment.
| [`> ${confirmComponentCls}-icon`]: { | |
| [`> ${token.iconCls}, > svg`]: { |
这样吧。
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
Modal.success/error/warning/info 调用的带图标的对话框，icon 样式的选择器为 token.iconCls，当使用第三方图标库时，样式不生效。
此变更增加了一层容器
${confirmComponentCls}-icon来赋予图标样式，兼容第三方图标库。📝 Changelog
☑️ Self-Check before Merge