层叠图层

Chakra UI 依赖 CSS 级联图层来提供一种可预测且高效的组件覆盖方式。图层定义与 Panda CSS 一致。

¥Chakra UI relies on CSS cascade layers to provide a predictable, performant way to override components. The layers are defined to match that of Panda CSS.

图层类型

¥Layer Types

Chakra 支持以下级联层类型：

¥Chakra supports these cascade layer types:

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

• @layer base：在 globalCss 配置属性中定义全局样式时，其位置。

• @layer recipes：在 theme.recipes 或 theme.slotRecipes 中定义配方样式时，其位置。

• @layer tokens：在 theme.tokens 或 theme.semanticTokens 中定义设计令牌时，其位置。

图层顺序

¥Layer Order

Chakra 将以下层附加到生成的表情样式表的顶部：

¥Chakra appends the following layers to the top of the generated emotion stylesheet:

@layer reset, base, tokens, recipes;

此结构允许在同一项目中结合使用 Chakra 和 Panda CSS 时获得更流畅的体验。

¥This structure allows for smoother experience when combining Chakra and Panda CSS in the same project.

禁用图层

¥Disabling Layers

级联层默认启用。如果你想禁用它们，可以通过将 disableLayers 选项设置为 true 来实现。

¥Cascade layers are enabled by default. If you want to disable them, you can do so by setting the disableLayers option to true

export const system = createSystem(defaultConfig, {
  disableLayers: true,
})

接下来，编辑 components/ui/provider 文件以使用新系统。

¥Next, edit the components/ui/provider file to use the new system

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>
  )
}