From ab83c1b6cb2eb347111f2cc7041da8d0cf748c4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 27 Feb 2023 15:35:22 +0800 Subject: [PATCH] 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 Co-authored-by: Amumu --- components/layout/__tests__/token.test.tsx | 48 ++++++++++++++++++ components/layout/layout.tsx | 50 +++++++++++++------ components/layout/style/index.ts | 58 ++++++++++++---------- 3 files changed, 113 insertions(+), 43 deletions(-) create mode 100644 components/layout/__tests__/token.test.tsx diff --git a/components/layout/__tests__/token.test.tsx b/components/layout/__tests__/token.test.tsx new file mode 100644 index 0000000000..bcaa883099 --- /dev/null +++ b/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( + +
+ { + const key = index + 1; + return { + key, + label: `nav ${key}`, + }; + })} + /> +
+ , + ); + + expect(container.querySelector('.ant-layout-header')).toHaveStyle({ + backgroundColor: '#FF0000', + }); + expect(container.querySelector('.ant-menu')).toHaveStyle({ + backgroundColor: '#00FF00', + }); + }); +}); diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx index 03f6449c67..e5e25d4fe2 100644 --- a/components/layout/layout.tsx +++ b/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 { 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((props, ref) => { - const { getPrefixCls } = React.useContext(ConfigContext); - const { prefixCls: customizePrefixCls } = props; - const prefixCls = getPrefixCls(suffixCls, customizePrefixCls); - - return ; - }); + const Adapter = React.forwardRef((props, ref) => ( + + )); if (process.env.NODE_ENV !== 'production') { Adapter.displayName = displayName; } @@ -48,10 +45,28 @@ function generator({ suffixCls, tagName, displayName }: GeneratorProps) { } const Basic = React.forwardRef((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( + , + ); }); const BasicLayout = React.forwardRef((props, ref) => { @@ -60,7 +75,7 @@ const BasicLayout = React.forwardRef((props, const [siders, setSiders] = React.useState([]); const { - prefixCls, + prefixCls: customizePrefixCls, className, rootClassName, children, @@ -68,6 +83,10 @@ const BasicLayout = React.forwardRef((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((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); diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts index 51b971e55a..86ec49c627 100644 --- a/components/layout/style/index.ts +++ b/components/layout/style/index.ts @@ -66,33 +66,6 @@ const genLayoutStyle: GenerateStyle = (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 = (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, + }, }; };