diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap new file mode 100644 index 000000000..8b8737fa3 --- /dev/null +++ b/packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap @@ -0,0 +1,16 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`ConfigProvider appProps > ConfigProvider styleProviderProps.component 1`] = ` +<DocumentFragment> + <div> + Child 1 + </div> + <div + class="ant-app" + > + <div> + Child 2 + </div> + </div> +</DocumentFragment> +`; diff --git a/packages/design/src/config-provider/__tests__/appProps.test.tsx b/packages/design/src/config-provider/__tests__/appProps.test.tsx new file mode 100644 index 000000000..d256061af --- /dev/null +++ b/packages/design/src/config-provider/__tests__/appProps.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { ConfigProvider } from '@oceanbase/design'; + +describe('ConfigProvider appProps', () => { + it('ConfigProvider styleProviderProps.component', () => { + const { asFragment } = render( + <ConfigProvider> + <div>Child 1</div> + <ConfigProvider appProps={{ component: 'div' }}> + <div>Child 2</div> + </ConfigProvider> + </ConfigProvider> + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/design/src/config-provider/index.md b/packages/design/src/config-provider/index.md index 25c8a93d2..8f70b293d 100644 --- a/packages/design/src/config-provider/index.md +++ b/packages/design/src/config-provider/index.md @@ -16,6 +16,7 @@ nav: <Alert type="warning" showIcon={true} message="📢 注意: 如果有多个 ConfigProvider,建议在最顶层的 ConfigProvider 开启 `injectStaticFunction` 即可,其他 ConfigProvider 则需要关闭该配置,否则静态方法可能会有冲突。"></Alert> - 🆕 新增 `styleProviderProps` 属性,一般用于配置 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 的 `hashPriority` 和 `transformers` 属性实现样式降级,来兼容 Chrome 88 以下的低版本浏览器,详见 [antd v5 样式兼容说明](https://ant-design.antgroup.com/docs/react/compatible-style-cn)。 +- 🆕 新增 `appProps` 属性,用于配置内嵌的 [App 组件属性](https://ant-design.antgroup.com/components/app-cn#app)。 ## 代码演示 @@ -55,5 +56,6 @@ export default App; | table | Table 全局配置 | `{ selectionColumnWidth?: width; className?: string; style?: React.CSSProperties; }` | - | - | | injectStaticFunction | 用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置 <Alert type="warning" showIcon={true} message="📢 注意: 如果有多个 ConfigProvider,建议在最顶层的 ConfigProvider 开启 `injectStaticFunction` 即可,其他 ConfigProvider 则需要关闭该配置,否则静态方法可能会有冲突。"></Alert> | boolean | true | - | | styleProviderProps | [StyleProvider 配置](https://github.com/ant-design/cssinjs#styleprovider),一般用于配置 `hashPriority` 和 `transformers` 属性实现样式降级 | [StyleProviderProps](https://github.com/ant-design/cssinjs/blob/master/src/StyleContext.tsx#L88) | - | - | +| appProps | 内嵌的 App 组件属性 | [AppProps](https://ant-design.antgroup.com/components/app-cn#app) | - | - | - 更多 API 详见 antd ConfigProvider 文档: https://ant.design/components/config-provider-cn diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx index b4a6fd6bf..b434eb312 100644 --- a/packages/design/src/config-provider/index.tsx +++ b/packages/design/src/config-provider/index.tsx @@ -6,6 +6,7 @@ import type { ThemeConfig as AntThemeConfig, } from 'antd/es/config-provider'; import type { ComponentStyleConfig } from 'antd/es/config-provider/context'; +import type { AppProps } from 'antd/es/app'; import type { PaginationConfig } from 'antd/es/pagination'; import type { SpinIndicator } from 'antd/es/spin'; import { StyleProvider } from '@ant-design/cssinjs'; @@ -66,6 +67,7 @@ export interface ConfigProviderProps extends AntConfigProviderProps { injectStaticFunction?: boolean; // StyleProvider props styleProviderProps?: StyleProviderProps; + appProps?: AppProps; } export interface ExtendedConfigConsumerProps { @@ -99,6 +101,7 @@ const ConfigProvider: ConfigProviderType = ({ tabs, injectStaticFunction = true, styleProviderProps, + appProps, ...restProps }) => { // inherit from parent ConfigProvider @@ -175,7 +178,7 @@ const ConfigProvider: ConfigProviderType = ({ <StyleProvider {...mergedStyleProviderProps}> {/* Nested App component for static function of message, notification and Modal to consume ConfigProvider config */} {/* ref: https://ant.design/components/app */} - <App component={false}> + <App component={false} {...appProps}> {children} {injectStaticFunction && <StaticFunction />} </App>