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 ではありません）。コンポーネント内で null 判定は不要です。これは plus との意図的な差異です。

スタイル

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