ConfigProvider 全域設定

為元件提供統一的全域設定（尺寸、語言、主題變數、背景花紋白名單）。

基礎用法

全域尺寸與主題變數

import { LhConfigProvider, LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhConfigProvider size="large" themeVars={{ 'primary-color': '#722ed1' }}>
        <LhButton type="primary">全局 large + 自定义主色</LhButton>
      </LhConfigProvider>

      <LhConfigProvider size="small">
        <LhButton type="primary">全局 small</LhButton>
      </LhConfigProvider>
    </>
  )
}

Props

屬性	說明	型別	預設值
size	全域尺寸	'large' | 'middle' | 'small'	—
locale	全域語言	LhComponentLanguage	'zh-CN'
themeVars	全域主題變數（鍵不帶 --lh- 前綴）	Record<string, string>	—
patternComponents	啟用背景花紋的元件白名單	LhThemeableComponent[]	—
componentTheme	按元件名單獨設定主題變數	Partial<Record<LhThemeableComponent, Record<string, string>>>	—

主題變數優先級

元件自身 props > componentTheme[元件名] > 全域 themeVars

themeVars 可用鍵

鍵	說明
primary-color	主色
success-color / warning-color / danger-color / info-color	語意色
gold-color / vermilion-color / jade-color	國風專屬色
bg-color / text-color / border-color	中性色
bg-pattern	花紋背景 URL（如 var(--lh-pattern-willow)）
bg-pattern-opacity / bg-pattern-color	花紋透明度與顏色
decoration-color	裝飾色

完整主題客製詳見主題客製。

在元件內讀取

import { useLhConfigContext } from '@lh-ui/react'

function Probe() {
  const { size, locale } = useLhConfigContext()
  return <span>{size} / {locale}</span>
}

消費側兜底

未包裹 LhConfigProvider 時，useLhConfigContext() 傳回全欄位 undefined 的兜底物件（而非 null），元件內不需要判空。這是與 plus 的一個有意差異。

樣式

import '@lh-ui/react/style/config-provider'