fix(layout): use best className slove token error

ant-design · May 8, 2023 · 8090248 · 8090248
1 parent 69070f1
commit 8090248
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 19 deletions.
diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
@@ -764,10 +764,6 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
               theme={{
                 hashed: isNeedOpenHash(),
                 components: {
-                  Layout: {
-                    colorBgHeader: 'transparent',
-                    colorBgBody: 'transparent',
-                  },
                   Menu: {
                     colorItemBg:
                       token?.layout?.sider?.colorMenuBackground ||
@@ -779,7 +775,6 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
                     controlHeightLG:
                       token?.layout?.sider?.menuHeight ||
                       token?.controlHeightLG,
-
                     colorItemBgSelected:
                       token?.layout?.sider?.colorBgMenuItemSelected ||
                       token?.colorBgTextHover,
@@ -795,12 +790,6 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
                     colorItemText:
                       token?.layout?.sider?.colorTextMenu ||
                       token?.colorTextSecondary,
-                    colorItemTextHoverHorizontal:
-                      token?.layout?.sider?.colorTextMenuActive ||
-                      token?.colorText,
-                    colorItemTextSelectedHorizontal:
-                      token?.layout?.sider?.colorTextMenuSelected ||
-                      token?.colorTextBase,
                     colorItemTextHover:
                       token?.layout?.sider?.colorTextMenuActive ||
                       'rgba(0, 0, 0, 0.85)',

diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -569,7 +569,7 @@ const BaseMenu: React.FC<BaseMenuProps & PrivateSiderMenuProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [openKeys && openKeys.join(','), props.layout, props.collapsed],
   );
-  const { wrapSSR, hashId } = useStyle(baseClassName);
+  const { wrapSSR, hashId } = useStyle(baseClassName + '-' + mode, mode);
 
   const menuUtils = useMemo(() => {
     return new MenuUtil({

diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts
@@ -1,17 +1,22 @@
 import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
 import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+import { MenuMode } from '../BaseMenu';
 
 export interface ProLayoutBaseMenuToken extends ProAliasToken {
   componentCls: string;
 }
 
 const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
   token,
+  mode,
 ) => {
+  const menuToken = mode.includes('horizontal')
+    ? token.layout?.header
+    : token.layout?.sider;
   return {
     [`${token.componentCls}`]: {
       background: 'transparent',
-      color: token.layout?.sider?.colorTextMenu,
+      color: menuToken?.colorTextMenu,
       border: 'none',
       [`${token.componentCls}-menu-item`]: {
         transition: 'none !important',
@@ -42,7 +47,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
         [`${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title, 
         ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title`]:
           {
-            backgroundColor: token.layout?.sider?.colorBgMenuItemSelected,
+            backgroundColor: menuToken?.colorBgMenuItemSelected,
             borderRadius: token.borderRadiusLG,
           },
         [`${token.componentCls}-group`]: {
@@ -67,7 +72,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
         flexDirection: 'row',
         alignItems: 'center',
         gap: 8,
-        color: token.layout?.sider?.colorTextMenu,
+        color: menuToken?.colorTextMenu,
         '&-collapsed': {
           flexDirection: 'column',
           justifyContent: 'center',
@@ -145,12 +150,12 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
   };
 };
 
-export function useStyle(prefixCls: string) {
-  return useAntdStyle('ProLayoutBaseMenu', (token) => {
+export function useStyle(prefixCls: string, mode: MenuMode | undefined) {
+  return useAntdStyle('ProLayoutBaseMenu' + mode, (token) => {
     const proLayoutMenuToken: ProLayoutBaseMenuToken = {
       ...token,
       componentCls: `.${prefixCls}`,
     };
-    return [genProLayoutBaseMenuStyle(proLayoutMenuToken)];
+    return [genProLayoutBaseMenuStyle(proLayoutMenuToken, mode || 'inline')];
   });
 }
diff --git a/packages/provider/src/useStyle/index.ts b/packages/provider/src/useStyle/index.ts
@@ -36,7 +36,7 @@ export const lighten = (baseColor: string, brightness: number) => {
 export type GenerateStyle<
   ComponentToken extends object = GlobalToken,
   ReturnType = CSSInterpolation,
-> = (token: ComponentToken) => ReturnType;
+> = (token: ComponentToken, ...rest: any[]) => ReturnType;
 
 const genTheme = (): any => {
   if (typeof theme === 'undefined' || !theme) return batToken as any;