feat: ✨ config-provider 支持customClass 与 customeStyle (#535)

Author: git-lt

docs/component/config-provider.md

@@ -129,3 +129,10 @@ const themeVars: ConfigProviderThemeVars = {
 | theme      | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | string | `dark`/`light` | -      | -        |
 | theme-vars | 自定义主题变量                                   | `ConfigProviderThemeVars` | -              | -      | -        |
 
+
+## 外部样式类
+
+| 类名         | 说明       | 最低版本         |
+| ------------ | ---------- | ---------------- |
+| custom-class | 根节点样式 | $LOWEST_VERSION$ |
+| custom-style | 根节点样式 | $LOWEST_VERSION$ |

src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts

@@ -1,9 +1,10 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { makeStringProp } from '../common/props'
+import { makeStringProp, baseProps } from '../common/props'
 
 export type ConfigProviderTheme = 'light' | 'dark'
 
 export const configProviderProps = {
+  ...baseProps,
   /**
    * 主题风格，设置为 dark 来开启深色模式，全局生效
    */

src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue

@@ -27,15 +27,17 @@ export default {
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { configProviderProps } from './types'
+import { objToStyle } from '../common/util'
 
 const props = defineProps(configProviderProps)
 
 const themeClass = computed(() => {
-  return `wot-theme-${props.theme}`
+  return `wot-theme-${props.theme} ${props.customClass}`
 })
 
 const themeStyle = computed(() => {
-  return mapThemeVarsToCSSVars(props.themeVars)
+  const styleObj = mapThemeVarsToCSSVars(props.themeVars)
+  return styleObj ? `${objToStyle(styleObj)};${props.customStyle}` : props.customStyle
 })
 
 const kebabCase = (str: string): string => {