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>>>	—

테마 변수 우선순위

컴포넌트 자체 프로퍼티 > 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'