feat: config-provider support Layout className and style properties (#43241)

components/config-provider/__tests__/style.test.tsx

@@ -10,6 +10,7 @@ import Divider from '../../divider';
 import Empty from '../../empty';
 import Image from '../../image';
 import Input from '../../input';
+import Layout from '../../layout';
 import Mentions from '../../mentions';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
@@ -294,6 +295,29 @@ describe('ConfigProvider support style and className props', () => {
     expect(inputElement).toHaveStyle({ color: 'blue' });
   });
 
+  it('Should Layout className & style works', () => {
+    const { baseElement } = render(
+      <ConfigProvider
+        layout={{
+          className: 'cp-layout',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Layout>
+          <Layout.Header>Header</Layout.Header>
+          <Layout.Content>Content</Layout.Content>
+          <Layout.Footer>Footer</Layout.Footer>
+        </Layout>
+      </ConfigProvider>,
+    );
+
+    const element = baseElement.querySelector<HTMLDivElement>('.ant-layout');
+    expect(element).toHaveClass('cp-layout');
+    expect(element).toHaveStyle({ background: 'red' });
+  });
+
   it('Should Mentions className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -97,6 +97,7 @@ export interface ConfigConsumerProps {
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
+  layout?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
   modal?: ComponentStyleConfig;
   result?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -112,6 +112,7 @@ const {
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |
+| layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -146,6 +146,7 @@ export interface ConfigProviderProps {
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
+  layout?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
   modal?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
@@ -252,6 +253,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     divider,
     steps,
     image,
+    layout,
     mentions,
     modal,
     result,
@@ -323,6 +325,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     input,
+    layout,
     mentions,
     modal,
     result,

components/config-provider/index.zh-CN.md

@@ -114,6 +114,7 @@ const {
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/layout/layout.tsx

@@ -82,12 +82,13 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
     children,
     hasSider,
     tagName: Tag,
+    style,
     ...others
   } = props;
 
   const passedProps = omit(others, ['suffixCls']);
 
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, layout } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('layout', customizePrefixCls);
 
   const [wrapSSR, hashId] = useStyle(prefixCls as string);
@@ -97,6 +98,7 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
       [`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    layout?.className,
     className,
     rootClassName,
     hashId,
@@ -118,7 +120,12 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
 
   return wrapSSR(
     <LayoutContext.Provider value={contextValue}>
-      <Tag ref={ref} className={classString} {...passedProps}>
+      <Tag
+        ref={ref}
+        className={classString}
+        style={{ ...layout?.style, ...style }}
+        {...passedProps}
+      >
         {children}
       </Tag>
     </LayoutContext.Provider>,
@@ -148,6 +155,6 @@ const Content = generator({
   displayName: 'Content',
 })(Basic);
 
-export { Header, Footer, Content };
+export { Content, Footer, Header };
 
 export default Layout;