Merge 9dfeda75b0 into 8abb52fc92

components/notification/PurePanel.tsx

@@ -61,7 +61,13 @@ export const PureContent: React.FC<PureContentProps> = (props) => {
     });
   }
   return (
-    <div className={classNames({ [`${prefixCls}-with-icon`]: iconNode })} role={role}>
+    <div
+      className={classNames({
+        [`${prefixCls}-with-icon`]: iconNode,
+        [`${prefixCls}-${type}-bg`]: !!type,
+      })}
+      role={role}
+    >
       {iconNode}
       <div className={`${prefixCls}-message`}>{message}</div>
       <div className={`${prefixCls}-description`}>{description}</div>

components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -459,7 +459,7 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co
       class="ant-notification-notice-content"
     >
       <div
-        class="ant-notification-notice-with-icon"
+        class="ant-notification-notice-with-icon ant-notification-notice-success-bg"
         role="alert"
       >
         <span

components/notification/__tests__/__snapshots__/demo.test.ts.snap

@@ -447,7 +447,7 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
       class="ant-notification-notice-content"
     >
       <div
-        class="ant-notification-notice-with-icon"
+        class="ant-notification-notice-with-icon ant-notification-notice-success-bg"
         role="alert"
       >
         <span

components/notification/style/index.ts

@@ -20,6 +20,26 @@ export interface ComponentToken {
    * @descEN Width of Notification
    */
   width: number | string;
+  /**
+   * @desc 提醒框success背景色
+   * @descEN Background color of Notification success
+   */
+  colorSuccessBgElevated: string;
+  /**
+   * @desc 提醒框error背景色
+   * @descEN Background color of Notification error
+   */
+  colorErrorBgElevated: string;
+  /**
+   * @desc 提醒框info背景色
+   * @descEN Background color of Notification info
+   */
+  colorInfoBgElevated: string;
+  /**
+   * @desc 提醒框warning背景色
+   * @descEN Background color of Notification warning
+   */
+  colorWarningBgElevated: string;
 }
 
 /**
@@ -111,6 +131,10 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
     lineHeight,
     width,
     notificationIconSize,
+    colorSuccessBgElevated,
+    colorErrorBgElevated,
+    colorInfoBgElevated,
+    colorWarningBgElevated,
     colorText,
   } = token;
 
@@ -133,6 +157,22 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
       wordWrap: 'break-word',
     },
 
+    [`${noticeCls}-success-bg`]: {
+      background: colorSuccessBgElevated,
+    },
+
+    [`${noticeCls}-info-bg`]: {
+      background: colorInfoBgElevated,
+    },
+
+    [`${noticeCls}-warning-bg`]: {
+      background: colorWarningBgElevated,
+    },
+
+    [`${noticeCls}-error-bg`]: {
+      background: colorErrorBgElevated,
+    },
+
     [`${noticeCls}-message`]: {
       marginBottom: token.marginXS,
       color: colorTextHeading,
@@ -350,6 +390,10 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 export const prepareComponentToken = (token: AliasToken) => ({
   zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
+  colorSuccessBgElevated: token.colorBgElevated,
+  colorErrorBgElevated: token.colorBgElevated,
+  colorInfoBgElevated: token.colorBgElevated,
+  colorWarningBgElevated: token.colorBgElevated,
 });
 
 export const prepareNotificationToken: (