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), so внутри компонента не требуется проверка на пустоту. Это намеренное отличие от plus.

Стили

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