全局 CSS

了解如何在 Chakra UI 中自定义全局 CSS

信息

请阅读概述以首先了解如何正确自定义样式引擎，并获得类型安全。

自定义

添加全局样式

以下是如何在 Chakra UI 中自定义全局 CSS 的示例。

theme.ts

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)

移除全局 CSS

如果您不需要全局 CSS，可以通过解构默认配置中的globalCss属性来移除它。

theme.ts

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

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

更新 Provider

自定义全局 CSS 后，请确保更新您的 Provider 组件以使用新系统。

components/ui/provider.tsx

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

CSS 变量

配方