ConfigProvider (configuración)

Proporciona a los componentes una configuración global unificada (tamaño, idioma, variables de tema, lista blanca de patrones de fondo).

Uso básico

Tamaño global y variables de tema

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

export default function Demo() {
  return (
    <>
      <LhConfigProvider size="large" themeVars={{ 'primary-color': '#722ed1' }}>
        <LhButton type="primary">large global + color principal personalizado</LhButton>
      </LhConfigProvider>

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

Props

Prop	Descripción	Tipo	Predeterminado
size	Tamaño global	'large' | 'middle' | 'small'	—
locale	Idioma global	LhComponentLanguage	'zh-CN'
themeVars	Variables de tema globales (las claves no llevan el prefijo --lh-)	Record<string, string>	—
patternComponents	Lista blanca de componentes que usan patrón de fondo	LhThemeableComponent[]	—
componentTheme	Configuración de variables de tema por componente	Partial<Record<LhThemeableComponent, Record<string, string>>>	—

Prioridad de las variables de tema

Props del propio componente > componentTheme[nombre del componente] > themeVars global

Claves disponibles de themeVars

Clave	Descripción
primary-color	Color principal
success-color / warning-color / danger-color / info-color	Colores semánticos
gold-color / vermilion-color / jade-color	Colores exclusivos del estilo chino
bg-color / text-color / border-color	Colores neutros
bg-pattern	URL del patrón de fondo (p. ej. var(--lh-pattern-willow))
bg-pattern-opacity / bg-pattern-color	Opacidad y color del patrón
decoration-color	Color decorativo

La personalización completa del tema se encuentra en Personalización del tema.

Lectura dentro de un componente

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

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

Valor de respaldo en el lado consumidor

Cuando no se envuelve con LhConfigProvider, useLhConfigContext() devuelve un objeto de respaldo con todos sus campos undefined (en vez de null), por lo que los componentes no necesitan comprobaciones de nulidad. Es una diferencia intencionada respecto a plus.

Estilos

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