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, }, };