feat: configprovider 组件支持传入 className 和 style 属性

src/packages/configprovider/__test__/__snapshots__/configprovider.spec.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`configprovider should match snapshot 1`] = `
+<div>
+  <div
+    class="nut-configprovider aa"
+    style="margin: 8px;"
+  >
+    测试
+  </div>
+</div>
+`;

src/packages/configprovider/__test__/configprovider.spec.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import enUS from '@/locales/en-US'
+
+import { ConfigProvider, useConfig } from '../configprovider'
+
+describe('configprovider', () => {
+  let container: any
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+    container = null
+  })
+
+  test('should match snapshot', () => {
+    const { container } = render(
+      <ConfigProvider className="aa" style={{ margin: 8 }}>
+        测试
+      </ConfigProvider>
+    )
+    expect(container.firstChild?.nodeName).toBe('DIV')
+    expect(container).toMatchSnapshot()
+  })
+
+  test('should theme variable and locale variable injection correctly', () => {
+    const Children: React.FC = () => {
+      const { locale } = useConfig()
+      return <>{locale.save}</>
+    }
+    const darkTheme = {
+      nutuiBrandColor: 'green',
+      nutuiBrandColorStart: 'green',
+      nutuiBrandColorEnd: 'green',
+    }
+    const { container } = render(
+      <ConfigProvider
+        data-testid="configprovider"
+        locale={enUS}
+        className="bb"
+        style={{ margin: 8 }}
+        theme={darkTheme}
+      >
+        <Children />
+      </ConfigProvider>
+    )
+
+    const ele = container.querySelector('.nut-configprovider')
+    expect(ele).toHaveTextContent('Save')
+    expect(ele).toHaveClass('nut-configprovider bb')
+    expect(ele).toHaveStyle(
+      '--nutui-brand-color: green; --nutui-brand-color-start: green; --nutui-brand-color-end: green; margin: 8px;'
+    )
+  })
+})

src/packages/configprovider/configprovider.taro.tsx

@@ -1,26 +1,24 @@
-import React, {
-  FunctionComponent,
-  createContext,
-  useContext,
-  useMemo,
-  CSSProperties,
-} from 'react'
+import React, { FunctionComponent, createContext, useContext } from 'react'
+import classNames from 'classnames'
 import kebabCase from 'lodash.kebabcase'
 import { BaseLang } from '@/locales/base'
 import zhCN from '@/locales/zh-CN'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import type { NutCSSVariables } from './types'
 
-export interface ConfigProviderProps {
+export interface ConfigProviderProps extends BasicComponent {
   locale: BaseLang
   theme?: Record<string | NutCSSVariables, string>
-
   [key: string]: any
 }
 
 const defaultProps = {
+  ...ComponentDefaults,
   locale: zhCN,
 } as ConfigProviderProps
 
+const classPrefix = 'nut-configprovider'
+
 export const defaultConfigRef: {
   current: ConfigProviderProps
 } = {
@@ -55,13 +53,12 @@ function convertThemeVarsToCSSVars(themeVars: Record<string, string | number>) {
 export const ConfigProvider: FunctionComponent<
   Partial<ConfigProviderProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const { children, ...config } = { ...defaultProps, ...props }
+  const { children, className, ...config } = { ...defaultProps, ...props }
   const parentConfig = useConfig()
-  const theme = config.theme || {}
-  const style = useMemo<CSSProperties | undefined>(
-    () => convertThemeVarsToCSSVars(theme),
-    [theme]
-  )
+  const style = {
+    ...convertThemeVarsToCSSVars(config.theme || {}),
+    ...config.style,
+  }
 
   return (
     <ConfigContext.Provider
@@ -70,7 +67,9 @@ export const ConfigProvider: FunctionComponent<
         ...config,
       }}
     >
-      <div style={style}>{children}</div>
+      <div className={classNames(classPrefix, className)} style={style}>
+        {children}
+      </div>
     </ConfigContext.Provider>
   )
 }

src/packages/configprovider/configprovider.tsx

@@ -1,26 +1,24 @@
-import React, {
-  FunctionComponent,
-  createContext,
-  useContext,
-  useMemo,
-  CSSProperties,
-} from 'react'
+import React, { FunctionComponent, createContext, useContext } from 'react'
+import classNames from 'classnames'
 import kebabCase from 'lodash.kebabcase'
 import { BaseLang } from '@/locales/base'
 import zhCN from '@/locales/zh-CN'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import type { NutCSSVariables } from './types'
 
-export interface ConfigProviderProps {
+export interface ConfigProviderProps extends BasicComponent {
   locale: BaseLang
   theme?: Record<string | NutCSSVariables, string>
-
   [key: string]: any
 }
 
 const defaultProps = {
+  ...ComponentDefaults,
   locale: zhCN,
 } as ConfigProviderProps
 
+const classPrefix = 'nut-configprovider'
+
 export const defaultConfigRef: {
   current: ConfigProviderProps
 } = {
@@ -55,13 +53,12 @@ function convertThemeVarsToCSSVars(themeVars: Record<string, string | number>) {
 export const ConfigProvider: FunctionComponent<
   Partial<ConfigProviderProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const { children, ...config } = { ...defaultProps, ...props }
+  const { children, className, ...config } = { ...defaultProps, ...props }
   const parentConfig = useConfig()
-  const theme = config.theme || {}
-  const style = useMemo<CSSProperties | undefined>(
-    () => convertThemeVarsToCSSVars(theme),
-    [theme]
-  )
+  const style = {
+    ...convertThemeVarsToCSSVars(config.theme || {}),
+    ...config.style,
+  }
 
   return (
     <ConfigContext.Provider
@@ -70,7 +67,9 @@ export const ConfigProvider: FunctionComponent<
         ...config,
       }}
     >
-      <div style={style}>{children}</div>
+      <div className={classNames(classPrefix, className)} style={style}>
+        {children}
+      </div>
     </ConfigContext.Provider>
   )
 }

src/packages/configprovider/doc.en-US.md

@@ -37,6 +37,8 @@ You can override these CSS variables directly in your code, and the styling of t
 
 The ConfigProvider component provides the ability to override CSS variables, and you need to wrap a ConfigProvider component at the root node and pass the theme Properties to configure some theme variables.
 
+> "ConfigProvider" component is not a virtual component, it generates a "div" tag.
+
 :::demo
 
 ```tsx

src/packages/configprovider/doc.md

@@ -37,6 +37,8 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W
 
 ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme 属性来配置一些主题变量。
 
+> ConfigProvider 组件不是一个虚拟组件，它会生成一个 div 标签。
+
 :::demo
 
 ```tsx

src/packages/configprovider/doc.taro.md

@@ -37,6 +37,8 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W
 
 ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme 属性来配置一些主题变量。
 
+> ConfigProvider 组件不是一个虚拟组件，它会生成一个 View 标签。
+
 :::demo
 
 ```tsx

src/packages/configprovider/doc.zh-TW.md

@@ -37,6 +37,8 @@ NutUI-React 可以通過 \[CSS 變數\]（https://developer.mozilla.org/zh-CN/do
 
 ConfigProvider 元件提供了覆蓋 CSS 變數的能力，你需要在根節點包裹一個 ConfigProvider 元件，並通過 theme 屬性來配置一些主題變數。
 
+> ConfigProvider 組件不是一個虛擬組件，它會生成一個 div 標簽。
+
 :::demo
 
 ```tsx