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

…he inner component when nested, close #4851
alibaba-fusion · Jul 16, 2024 · 460982c · 460982c
1 parent db01913
commit 460982c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/components/message/__tests__/issue-spec.tsx b/components/message/__tests__/issue-spec.tsx
@@ -30,4 +30,33 @@ describe('Message issues', () => {
                 expect(iconPos.y).to.equal(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', () => {
+        cy.mount(
+            <Message type="help">
+                <Message type="error">
+                    <span>help</span>
+                </Message>
+            </Message>
+        );
+        cy.get('.next-message-help').should('have.length', 1);
+        cy.get('.next-message-error').should('have.length', 1);
+
+        cy.get('.next-message-help .next-message-symbol-icon').then($el => {
+            expect($el.css('color')).to.equal('rgb(1, 193, 178)');
+            const element = $el[0];
+            const helpIconCode = window.getComputedStyle(element, '::before').content;
+            console.log(helpIconCode.charCodeAt(1).toString(16));
+            expect(helpIconCode.charCodeAt(1).toString(16)).to.equal('e673');
+        });
+
+        cy.get('.next-message-error .next-message-symbol-icon').then($el => {
+            expect($el.css('color')).to.equal('rgb(255, 48, 0)');
+            const element = $el[0];
+            const errorIconCode = window.getComputedStyle(element, '::before').content;
+            console.log(errorIconCode.charCodeAt(1).toString(16));
+            expect(errorIconCode.charCodeAt(1).toString(16)).to.equal('e60d');
+        });
+    });
 });
diff --git 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)) {