ConfigProvider (configuration)

Fournit aux composants une configuration globale unifiée (taille, langue, variables de thème, liste blanche des motifs de fond).

Utilisation de base

Taille globale et variables de thème

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

export default function Demo() {
  return (
    <>
      <LhConfigProvider size="large" themeVars={{ 'primary-color': '#722ed1' }}>
        <LhButton type="primary">Large global + couleur principale personnalisée</LhButton>
      </LhConfigProvider>

      <LhConfigProvider size="small">
        <LhButton type="primary">Small global</LhButton>
      </LhConfigProvider>
    </>
  )
}

Props

Prop	Description	Type	Valeur par défaut
size	Taille globale	'large' | 'middle' | 'small'	—
locale	Langue globale	LhComponentLanguage	'zh-CN'
themeVars	Variables de thème globales (les clés sont sans le préfixe --lh-)	Record<string, string>	—
patternComponents	Liste blanche des composants autorisés à afficher un motif de fond	LhThemeableComponent[]	—
componentTheme	Configuration distincte des variables de thème par composant	Partial<Record<LhThemeableComponent, Record<string, string>>>	—

Priorité des variables de thème

props du composant lui-même > componentTheme[nom du composant] > themeVars global

Clés disponibles de themeVars

Clé	Description
primary-color	Couleur principale
success-color / warning-color / danger-color / info-color	Couleurs sémantiques
gold-color / vermilion-color / jade-color	Couleurs exclusives au style chinois
bg-color / text-color / border-color	Couleurs neutres
bg-pattern	URL du motif de fond (par ex. var(--lh-pattern-willow))
bg-pattern-opacity / bg-pattern-color	Opacité et couleur du motif
decoration-color	Couleur d'ornement

Pour une personnalisation complète du thème, voir Personnalisation du thème.

Lecture au sein d'un composant

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

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

Valeur de repli côté consommation

En l'absence de LhConfigProvider, useLhConfigContext() renvoie un objet de repli dont tous les champs valent undefined (et non null) : aucun test de nullité n'est nécessaire dans le composant. Il s'agit d'une différence délibérée avec plus.

Styles

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