캐스케이드 레이어
캐스케이드 레이어 (Cascade Layers)
CSS 캐스케이드 레이어는 HTML 요소에 CSS 규칙이 적용되는 순서를 말해요. Chakra UI는 CSS 캐스케이드 레이어에 의존해 컴포넌트를 예측 가능하고 성능 좋게 오버라이드하는 방식을 제공합니다.
출처: 문서
본문
Chakra UI는 컴포넌트를 예측 가능하고 성능 좋게 오버라이드하는 방법으로 CSS 캐스케이드 레이어에 의존해요. 레이어는 Panda CSS의 것과 일치하도록 정의되었습니다.
알아두면 좋아요: 이것은 v3.x에서 더 빠른 재조정(reconciliation) 시간에 큰 역할을 합니다.
레이어 유형 (Layer Types)
Chakra는 다음 캐스케이드 레이어 유형을 지원해요.
-
@layer reset: preflight 또는 CSS 리셋 스타일이 정의되는 곳이에요. -
@layer base:globalCss설정 속성에 정의된 전역 스타일이 놓이는 곳이에요. -
@layer recipes:theme.recipes또는theme.slotRecipes에 정의된 레시피 스타일이 놓이는 곳이에요. -
@layer tokens:theme.tokens또는theme.semanticTokens에 정의된 디자인 토큰 스타일이 놓이는 곳이에요.
레이어 순서 (Layer Order)
Chakra는 생성된 emotion 스타일시트의 맨 위에 다음 레이어를 추가해요.
@layer reset, base, tokens, recipes;
이 구조 덕분에 같은 프로젝트에서 Chakra와 Panda CSS를 결합할 때 더 매끄러운 경험을 할 수 있어요.
레이어 비활성화 (Disabling Layers)
캐스케이드 레이어는 기본적으로 활성화되어 있어요. 비활성화하고 싶다면 disableLayers 옵션을 true로 설정하면 됩니다.
export const system = createSystem(defaultConfig, {
disableLayers: true,
})
다음으로, 새 시스템을 사용하도록 components/ui/provider 파일을 편집하세요.
import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"
import { system } from "./theme"
export function Provider(props: React.PropsWithChildren) {
return (
<ChakraProvider value={system}>
<ColorModeProvider>{props.children}</ColorModeProvider>
</ChakraProvider>
)
}