fix: Fix token of Layout.colorBgHeader not work when single use Layout.Header directly (#40933)

* docs: fix typos

* Update index.zh-CN.md

* test: update snapshot

* docs: fix demo ref

* chore: force trigger ci

* chore: force trigger ci

* chore: bump dumi ver

* fix: Layout.Header token not work as expect

---------

Co-authored-by: Lioness100 <jchickmm2@gmail.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>

components/layout/__tests__/token.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Layout from '..';
+import { render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
+import Menu from '../../menu';
+
+const { Header } = Layout;
+
+describe('Layout.Token', () => {
+  it('theme should work', () => {
+    const { container } = render(
+      <ConfigProvider
+        theme={{
+          components: {
+            Layout: {
+              colorBgHeader: '#FF0000',
+            },
+            Menu: {
+              colorItemBg: '#00FF00',
+            },
+          },
+        }}
+      >
+        <Header>
+          <Menu
+            theme="dark"
+            mode="horizontal"
+            defaultSelectedKeys={['2']}
+            items={new Array(15).fill(null).map((_, index) => {
+              const key = index + 1;
+              return {
+                key,
+                label: `nav ${key}`,
+              };
+            })}
+          />
+        </Header>
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-layout-header')).toHaveStyle({
+      backgroundColor: '#FF0000',
+    });
+    expect(container.querySelector('.ant-menu')).toHaveStyle({
+      backgroundColor: '#00FF00',
+    });
+  });
+});

components/layout/layout.tsx

@@ -4,12 +4,13 @@ import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
 export interface GeneratorProps {
-  suffixCls: string;
+  suffixCls?: string;
   tagName: 'header' | 'footer' | 'main' | 'section';
   displayName: string;
 }
 export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
+  suffixCls?: string;
   rootClassName?: string;
   hasSider?: boolean;
 }
@@ -33,13 +34,9 @@ interface BasicPropsWithTagName extends BasicProps {
 
 function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
   return (BasicComponent: any) => {
-    const Adapter = React.forwardRef<HTMLElement, BasicProps>((props, ref) => {
-      const { getPrefixCls } = React.useContext(ConfigContext);
-      const { prefixCls: customizePrefixCls } = props;
-      const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
-
-      return <BasicComponent ref={ref} prefixCls={prefixCls} tagName={tagName} {...props} />;
-    });
+    const Adapter = React.forwardRef<HTMLElement, BasicProps>((props, ref) => (
+      <BasicComponent ref={ref} suffixCls={suffixCls} tagName={tagName} {...props} />
+    ));
     if (process.env.NODE_ENV !== 'production') {
       Adapter.displayName = displayName;
     }
@@ -48,10 +45,28 @@ function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
 }
 
 const Basic = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
-  const { prefixCls, className, children, tagName, ...others } = props;
-  const classString = classNames(prefixCls, className);
+  const {
+    prefixCls: customizePrefixCls,
+    suffixCls,
+    className,
+    tagName: TagName,
+    ...others
+  } = props;
 
-  return React.createElement(tagName, { className: classString, ...others, ref }, children);
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('layout', customizePrefixCls);
+
+  const [wrapSSR, hashId] = useStyle(prefixCls as string);
+
+  const prefixWithSuffixCls = suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
+
+  return wrapSSR(
+    <TagName
+      className={classNames(customizePrefixCls || prefixWithSuffixCls, className, hashId)}
+      ref={ref}
+      {...others}
+    />,
+  );
 });
 
 const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
@@ -60,7 +75,7 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
   const [siders, setSiders] = React.useState<string[]>([]);
 
   const {
-    prefixCls,
+    prefixCls: customizePrefixCls,
     className,
     rootClassName,
     children,
@@ -68,6 +83,10 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
     tagName: Tag,
     ...others
   } = props;
+
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('layout', customizePrefixCls);
+
   const [wrapSSR, hashId] = useStyle(prefixCls as string);
   const classString = classNames(
     prefixCls,
@@ -104,25 +123,24 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
 });
 
 const Layout = generator({
-  suffixCls: 'layout',
   tagName: 'section',
   displayName: 'Layout',
 })(BasicLayout);
 
 const Header = generator({
-  suffixCls: 'layout-header',
+  suffixCls: 'header',
   tagName: 'header',
   displayName: 'Header',
 })(Basic);
 
 const Footer = generator({
-  suffixCls: 'layout-footer',
+  suffixCls: 'footer',
   tagName: 'footer',
   displayName: 'Footer',
 })(Basic);
 
 const Content = generator({
-  suffixCls: 'layout-content',
+  suffixCls: 'content',
   tagName: 'main',
   displayName: 'Content',
 })(Basic);

components/layout/style/index.ts

@@ -66,33 +66,6 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         flex: '0 0 auto',
       },
 
-      [`${componentCls}-header`]: {
-        height: layoutHeaderHeight,
-        paddingInline: layoutHeaderPaddingInline,
-        color: layoutHeaderColor,
-        lineHeight: `${layoutHeaderHeight}px`,
-        background: colorBgHeader,
-        // Other components/menu/style/index.less line:686
-        // Integration with header element so menu items have the same height
-        [`${antCls}-menu`]: {
-          lineHeight: 'inherit',
-        },
-      },
-
-      [`${componentCls}-footer`]: {
-        padding: layoutFooterPadding,
-        color: colorText,
-        fontSize,
-        background: colorBgBody,
-      },
-
-      [`${componentCls}-content`]: {
-        flex: 'auto',
-
-        // fix firefox can't set height smaller than content on flex item
-        minHeight: 0,
-      },
-
       [`${componentCls}-sider`]: {
         position: 'relative',
 
@@ -191,6 +164,37 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         direction: 'rtl',
       },
     },
+
+    // ==================== Header ====================
+    [`${componentCls}-header`]: {
+      height: layoutHeaderHeight,
+      paddingInline: layoutHeaderPaddingInline,
+      color: layoutHeaderColor,
+      lineHeight: `${layoutHeaderHeight}px`,
+      background: colorBgHeader,
+
+      // Other components/menu/style/index.less line:686
+      // Integration with header element so menu items have the same height
+      [`${antCls}-menu`]: {
+        lineHeight: 'inherit',
+      },
+    },
+
+    // ==================== Footer ====================
+    [`${componentCls}-footer`]: {
+      padding: layoutFooterPadding,
+      color: colorText,
+      fontSize,
+      background: colorBgBody,
+    },
+
+    // =================== Content ====================
+    [`${componentCls}-content`]: {
+      flex: 'auto',
+
+      // fix firefox can't set height smaller than content on flex item
+      minHeight: 0,
+    },
   };
 };