级联层

Chakra UI 依赖 CSS 级联层来提供一种可预测、高性能的组件覆盖方式。这些层被定义为与Panda CSS.

层类型

Chakra 支持以下级联层类型

• @layer reset：定义预检或 CSS 重置样式的地方。

• @layer base：在 globalCss 配置属性中定义全局样式的地方。

• @layer recipes：在 theme.recipes 或 theme.slotRecipes 中定义配方样式的地方。

• @layer tokens：在 theme.tokens 或 theme.semanticTokens 中定义设计令牌样式的地方。

层顺序

Chakra 将以下层添加到生成的 emotion 样式表的顶部

@layer reset, base, tokens, recipes;

这种结构使得在同一项目中结合 Chakra 和 Panda CSS 时能获得更流畅的体验。

禁用层

级联层默认启用。如果您想禁用它们，可以将 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>
  )
}