전역 CSS 커스터마이징

전역 CSS 커스터마이징 (Customizing Global CSS)

Chakra UI에서 전역 CSS를 커스터마이징하는 방법에 대해 알아봐요. globalCss 설정으로 전역 스타일, 글꼴, placeholder/selection 스타일 등을 손쉽게 제어할 수 있어요.

출처: 문서

본문

:::info

스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.

:::

커스터마이징 (Customize)

전역 스타일 추가 (Add global styles)

Chakra UI에서 전역 CSS를 커스터마이징하는 예시예요.

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  globalCss: {
    "*::placeholder": {
      opacity: 1,
      color: "fg.subtle",
    },
    "*::selection": {
      bg: "green.200",
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

전역 글꼴 변경 (Change global font family)

글꼴을 전역으로 바꾸려면 globalCss의 html 요소에 설정해요.

const customConfig = defineConfig({
  globalCss: {
    html: {
      fontFamily: "Roboto, sans-serif",
    },
  },
})

또는 커스텀 글꼴 토큰을 정의할 수도 있어요.

const customConfig = defineConfig({
  theme: {
    tokens: {
      fonts: {
        body: { value: "Roboto, sans-serif" },
        heading: { value: "Poppins, sans-serif" },
        mono: { value: "Fira Code, monospace" },
      },
    },
  },
})

전역 CSS 제거 (Remove global CSS)

전역 CSS가 필요 없다면 기본 config에서 globalCss 프로퍼티를 구조 분해(destructure)로 빼면 돼요.

import { createSystem, defaultConfig } from "@chakra-ui/react"

const { globalCss: _, ...restConfig } = defaultConfig
export const system = createSystem(restConfig)

Provider 업데이트 (Update provider)

전역 CSS를 커스터마이징한 뒤에는 provider 컴포넌트가 새 시스템을 사용하도록 업데이트해야 해요.

"use client"

import { system } from "@/components/theme"
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}