CSS 변수 커스터마이징
CSS 변수 커스터마이징 (Customizing CSS Variables)
Chakra UI에서 CSS 변수를 커스터마이징하는 방법에 대해 알아봐요. 토큰 CSS 변수가 적용될 루트 선택자와 변수 접두사를 바꿀 수 있어요.
출처: 문서
본문
:::info
스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.
:::
변수 루트 (Variable Root)
토큰 CSS 변수가 적용될 선택자를 커스터마이징하는 예시예요.
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
cssVarsRoot: ":where(html)",
})
export const system = createSystem(defaultConfig, customConfig)
이제 생성된 CSS 변수가 html 요소에 적용돼요.
:where(html) {
--chakra-colors-gray-100: #e6f2ff;
--chakra-colors-gray-200: #bfdeff;
--chakra-colors-gray-300: #99caff;
}
변수 접두사 (Variable Prefix)
생성된 CSS 변수의 접두사를 커스터마이징하는 예시예요.
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
cssVarsPrefix: "sui",
})
export const system = createSystem(defaultConfig, customConfig)
이제 생성된 CSS 변수가 sui 접두사를 사용해요.
:where(html) {
--sui-colors-gray-100: #e6f2ff;
--sui-colors-gray-200: #bfdeff;
--sui-colors-gray-300: #99caff;
}