fix(Message): The styles of the outer Message component will affect t…

…he inner component when nested, close alibaba-fusion#4851

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('The styles of the outer Message component will affect the inner component when nested', () => {
+        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');
+    });
 });

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)) {