fix(menu): font color is not changed after theme is changed in chrome…

… 99, closes #2563
tusen-ai · Mar 8, 2022 · 268adf5 · 268adf5
1 parent 46bab31
commit 268adf5
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 91 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,6 +7,7 @@
 - Fix `n-cascader` arrow's loading animation is kept for too long time.
 - Fix `n-select` menu doesn't follow theme.
 - Fix `n-tabs` throws error without child, closes [#809](https://github.com/TuSimple/naive-ui/issues/809).
+- Fix `n-menu`'s font color is not changed after theme is changed in chrome 99, closes [#2563](https://github.com/TuSimple/naive-ui/issues/2563). This is actual a bug of chrome, however we used a workaround and fixed it.
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -7,6 +7,7 @@
 - 修复 `n-cascader` 节点箭头 loading 显示过久
 - 修复 `n-select` 菜单不随主题变化
 - 修复 `n-tabs` 不能没有子节点，关闭 [#809](https://github.com/TuSimple/naive-ui/issues/809)
+- 修复 `n-menu` 切换主题时在 chrome 99 内字体颜色异常，关闭 [#2563](https://github.com/TuSimple/naive-ui/issues/2563)，这实际上是一个 chrome 的问题，我们进行了临时的修复
 
 ### Feats
 

diff --git a/src/menu/src/styles/index.cssr.ts b/src/menu/src/styles/index.cssr.ts
@@ -35,16 +35,12 @@ export default c([
     font-size: var(--n-font-size);
     padding-bottom: 6px;
   `, [
-    cM('horizontal', {
-      display: 'inline-flex',
-      paddingBottom: 0
-    }, [
-      cB('submenu', {
-        margin: 0
-      }),
-      cB('menu-item', {
-        margin: 0
-      }, [
+    cM('horizontal', `
+      display: inline-flex;
+      padding-bottom: 0;
+    `, [
+      cB('submenu', 'margin: 0;'),
+      cB('menu-item', 'margin: 0;', [
         c('&::before', {
           backgroundColor: '#0000 !important'
         }),
@@ -54,18 +50,16 @@ export default c([
           })
         ])
       ]),
-      cB('menu-item-content', {
-        padding: '0 20px',
-        borderBottom: '2px solid #0000'
-      }, [
-        cM('child-active', {
-          borderBottom: '2px solid var(--n-border-color-horizontal)'
-        }),
+      cB('menu-item-content', `
+        padding: 0 20px;
+        border-bottom: 2px solid #0000;
+      `, [
+        cM('child-active', `
+          border-bottom: 2px solid var(--n-border-color-horizontal);
+        `),
         cNotM('disabled', [
           hoverStyle(
-            {
-              borderBottom: '2px solid var(--n-border-color-horizontal)'
-            },
+            'border-bottom: 2px solid var(--n-border-color-horizontal);',
             null
           )
         ])
@@ -75,21 +69,15 @@ export default c([
     cM('collapsed', [
       cB('menu-item', [
         cM('selected', [
-          c('&::before', {
-            backgroundColor: 'var(--n-item-color-active-collapsed) !important'
-          })
+          c('&::before', `
+            background-color: var(--n-item-color-active-collapsed) !important;
+          `)
         ])
       ]),
       cB('menu-item-content', [
-        cB('menu-item-content-header', {
-          opacity: 0
-        }),
-        cE('arrow', {
-          opacity: 0
-        }),
-        cE('icon', {
-          color: 'var(--n-item-icon-color-collapsed)'
-        })
+        cB('menu-item-content-header', 'opacity: 0;'),
+        cE('arrow', 'opacity: 0;'),
+        cE('icon', 'color: var(--n-item-icon-color-collapsed);')
       ])
     ]),
     cB('menu-item', `
@@ -112,27 +100,18 @@ export default c([
         transition: background-color .3s var(--n-bezier);
       `),
       cNotM('disabled', [
-        c('&:active::before', {
-          backgroundColor: 'var(--n-item-color-active)'
-        })
+        c('&:active::before', 'background-color: var(--n-item-color-active);')
       ]),
       cM('selected', [
-        c('&::before', {
-          backgroundColor: 'var(--n-item-color-active)'
-        }),
+        c('&::before', 'background-color: var(--n-item-color-active);'),
         cB('menu-item-content', [
-          cE('arrow', {
-            color: 'var(--n-arrow-color-active)'
-          }),
-          cE('icon', {
-            color: 'var(--n-item-icon-color-active)'
-          }),
-          cB('menu-item-content-header', {
-            color: 'var(--n-item-text-color-active)'
-          }, [
-            cE('extra', {
-              color: 'var(--n-item-text-color-active)'
-            })
+          cE('arrow', 'color: var(--n-arrow-color-active);'),
+          cE('icon', 'color: var(--n-item-icon-color-active);'),
+          cB('menu-item-content-header', `
+            color: var(--n-item-text-color-active);
+          `, [
+            c('a', 'color: var(--n-item-text-color-active);'),
+            cE('extra', 'color: var(--n-item-text-color-active);')
           ])
         ])
       ])
@@ -154,44 +133,48 @@ export default c([
         padding-left .3s var(--n-bezier),
         border-color .3s var(--n-bezier);
     `, [
-      cM('disabled', {
-        opacity: '.45',
-        cursor: 'not-allowed'
-      }),
+      cM('disabled', `
+        opacity: .45;
+        cursor: not-allowed;
+      `),
       cM('collapsed', [
-        cE('arrow', {
-          transform: 'rotate(0)'
-        })
+        cE('arrow', 'transform: rotate(0);')
       ]),
       cM('child-active', [
-        cB('menu-item-content-header', {
-          color: 'var(--n-item-text-color-child-active)'
-        }, [
-          cE('extra', {
-            color: 'var(--n-item-text-color-child-active)'
-          })
+        cB('menu-item-content-header', `
+          color: var(--n-item-text-color-child-active);
+        `, [
+          c('a', `
+            color: var(--n-item-text-color-child-active);
+          `),
+          cE('extra', `
+            color: var(--n-item-text-color-child-active);
+          `)
         ]),
-        cE('arrow', {
-          color: 'var(--n-arrow-color-child-active)'
-        }),
-        cE('icon', {
-          color: 'var(--n-item-icon-color-child-active)'
-        })
+        cE('arrow', `
+          color: var(--n-arrow-color-child-active);
+        `),
+        cE('icon', `
+          color: var(--n-item-icon-color-child-active);
+        `)
       ]),
       cNotM('disabled', [
         hoverStyle(null, [
-          cE('arrow', {
-            color: 'var(--n-arrow-color-hover)'
-          }),
-          cE('icon', {
-            color: 'var(--n-item-icon-color-hover)'
-          }),
-          cB('menu-item-content-header', {
-            color: 'var(--n-item-text-color-hover)'
-          }, [
-            cE('extra', {
-              color: 'var(--n-item-text-color-hover)'
-            })
+          cE('arrow', `
+            color: var(--n-arrow-color-hover);
+          `),
+          cE('icon', `
+            color: var(--n-item-icon-color-hover);
+          `),
+          cB('menu-item-content-header', `
+            color: var(--n-item-text-color-hover);
+          `, [
+            c('a', `
+              color: var(--n-item-text-color-hover);
+            `),
+            cE('extra', `
+              color: var(--n-item-text-color-hover);
+            `)
           ])
         ])
       ]),
@@ -231,7 +214,8 @@ export default c([
       `, [
         c('a', `
           text-decoration: none;
-          color: inherit;
+          transition: color .3s var(--n-bezier);
+          color: var(--n-item-text-color);
         `, [
           c('&::before', `
             content: "";
@@ -249,18 +233,18 @@ export default c([
         `)
       ])
     ]),
-    cB('submenu', {
-      cursor: 'pointer',
-      position: 'relative',
-      marginTop: '6px'
-    }, [
+    cB('submenu', `
+      cursor: pointer;
+      position: relative;
+      margin-top: 6px;
+    `, [
       cB('menu-item-content', `
         height: var(--n-item-height);
       `),
-      cB('submenu-children', {
-        overflow: 'hidden',
-        padding: 0
-      }, [
+      cB('submenu-children', `
+        overflow: hidden;
+        padding: 0;
+      `, [
         fadeInHeightExpandTransition({
           duration: '.2s'
         })