diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index 973d450f11e8..4f4450d03d4c 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -142,7 +142,7 @@ export function ConfirmContent(
[`${bodyCls}-has-title`]: hasTitle,
})}
>
- {mergedIcon}
+
{mergedIcon}
{hasTitle &&
{props.title}}
{props.content}
diff --git a/components/modal/style/confirm.ts b/components/modal/style/confirm.ts
index 9c732287977e..e39fe444703b 100644
--- a/components/modal/style/confirm.ts
+++ b/components/modal/style/confirm.ts
@@ -44,7 +44,8 @@ const genModalConfirmStyle: GenerateStyle
= (token) => {
flexWrap: 'nowrap',
alignItems: 'start',
- [`> ${token.iconCls}`]: {
+ [`> ${confirmComponentCls}-icon`]: {
+ display: 'flex',
flex: 'none',
fontSize: modalConfirmIconSize,
marginInlineEnd: token.confirmIconMarginInlineEnd,
@@ -53,7 +54,7 @@ const genModalConfirmStyle: GenerateStyle = (token) => {
.div(2)
.equal(),
},
- [`&-has-title > ${token.iconCls}`]: {
+ [`&-has-title > ${confirmComponentCls}-icon`]: {
marginTop: token
.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal())
.div(2)
@@ -69,7 +70,7 @@ const genModalConfirmStyle: GenerateStyle = (token) => {
},
// https://github.com/ant-design/ant-design/issues/48159
- [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
+ [`${confirmComponentCls}-icon + ${confirmComponentCls}-paragraph`]: {
maxWidth: `calc(100% - ${unit(
token.calc(token.modalConfirmIconSize).add(token.marginSM).equal(),
)})`,
@@ -100,20 +101,21 @@ const genModalConfirmStyle: GenerateStyle = (token) => {
},
},
- [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
+ [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]: {
color: token.colorError,
},
- [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
- ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
- color: token.colorWarning,
- },
+ [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${confirmComponentCls}-icon,
+ ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]:
+ {
+ color: token.colorWarning,
+ },
- [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
+ [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]: {
color: token.colorInfo,
},
- [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
+ [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]: {
color: token.colorSuccess,
},
};