From ea78fd3dfae6f281f6b5d8b1c8bfebe5547574de Mon Sep 17 00:00:00 2001
From: wangw11056 <wangw11056@163.com>
Date: Tue, 4 Jun 2024 17:16:11 +0800
Subject: [PATCH] fix(Message): Style override problem when Message components
 are nested in each other, close #4851

---
 components/message/__tests__/issue-spec.js | 28 ++++++++++++++++++++++
 components/message/scss/mixin.scss         |  8 +++----
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/components/message/__tests__/issue-spec.js b/components/message/__tests__/issue-spec.js
index 11a0980b1c..1a5c313de3 100644
--- a/components/message/__tests__/issue-spec.js
+++ b/components/message/__tests__/issue-spec.js
@@ -60,4 +60,32 @@ describe('Message issues', () => {
         assert(iconPos.height === contentPos.height);
         assert(iconPos.y === contentPos.y);
     });
+
+    // Fix: https://github.com/alibaba-fusion/next/issues/4851
+    it('should be rendered correctly styles when Message components are nested within each other', () => {
+        wrapper = render(
+            <Message type="help">
+                <Message type="error">
+                    <span>help</span>
+                </Message>
+            </Message>
+        );
+        assert(wrapper.find('.next-message-help').length === 1);
+        assert(wrapper.find('.next-message-error').length === 1);
+
+        const helpIcon = wrapper.find('.next-message-help .next-message-symbol-icon')[0];
+        const errorIcon = wrapper.find('.next-message-error .next-message-symbol-icon')[0];
+        assert(helpIcon);
+        assert(errorIcon);
+
+        const helpIconStyles = window.getComputedStyle(helpIcon);
+        const errorIconStyles = window.getComputedStyle(errorIcon);
+        assert(helpIconStyles.color === 'rgb(1, 193, 178)');
+        assert(errorIconStyles.color === 'rgb(255, 48, 0)');
+
+        const helpIconCode = window.getComputedStyle(helpIcon, '::before').content;
+        const errorIconCode = window.getComputedStyle(errorIcon, '::before').content;
+        assert(helpIconCode.charCodeAt(1).toString(16) === 'e673');
+        assert(errorIconCode.charCodeAt(1).toString(16) === 'e60d');
+    });
 });
diff --git a/components/message/scss/mixin.scss b/components/message/scss/mixin.scss
index afbb524f82..e8c4014f06 100755
--- a/components/message/scss/mixin.scss
+++ b/components/message/scss/mixin.scss
@@ -59,16 +59,16 @@
     border-color: $borderColor;
     box-shadow: $shadow;
 
-    .#{$css-prefix}message-title {
+    > .#{$css-prefix}message-title {
         color: $titleColor;
     }
-    .#{$css-prefix}message-content {
+    > .#{$css-prefix}message-content {
         color: $contentColor;
     }
-    .#{$css-prefix}message-symbol {
+    > .#{$css-prefix}message-symbol {
         color: $iconColor;
     }
-    .#{$css-prefix}message-symbol-icon::before {
+    > .#{$css-prefix}message-symbol-icon::before {
         vertical-align: top;
         content: $icon;
         @if (get-compiling-value($icon) == get-compiling-value($message-loading-icon-content)) {