From c4d981a7123062357389c6f8d71e372b7151dfa4 Mon Sep 17 00:00:00 2001
From: muxin <434980373@qq.com>
Date: Wed, 28 Jun 2023 13:51:24 +0800
Subject: [PATCH] feat: config-provider support Layout className and style
properties (#43241)
---
.../config-provider/__tests__/style.test.tsx | 24 +++++++++++++++++++
components/config-provider/context.ts | 1 +
components/config-provider/index.en-US.md | 1 +
components/config-provider/index.tsx | 3 +++
components/config-provider/index.zh-CN.md | 1 +
components/layout/layout.tsx | 13 +++++++---
6 files changed, 40 insertions(+), 3 deletions(-)
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 48dc67abe6..2ded941ab3 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/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(
+
+
+ Header
+ Content
+ Footer
+
+ ,
+ );
+
+ const element = baseElement.querySelector('.ant-layout');
+ expect(element).toHaveClass('cp-layout');
+ expect(element).toHaveStyle({ background: 'red' });
+ });
+
it('Should Mentions className & style works', () => {
const { container } = render(
= (props) => {
divider,
steps,
image,
+ layout,
mentions,
modal,
result,
@@ -323,6 +325,7 @@ const ProviderChildren: React.FC = (props) => {
steps,
image,
input,
+ layout,
mentions,
modal,
result,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index d1db85981a..a1eea8203e 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/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 |
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index fa9b41487d..c492146c3b 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -82,12 +82,13 @@ const BasicLayout = React.forwardRef((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((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((props,
return wrapSSR(
-
+
{children}
,
@@ -148,6 +155,6 @@ const Content = generator({
displayName: 'Content',
})(Basic);
-export { Header, Footer, Content };
+export { Content, Footer, Header };
export default Layout;