全局 CSS

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

info

请先阅读 overview 组件，了解如何正确自定义样式引擎并确保类型安全。

¥Please read the overview first to learn how to properly customize the styling engine, and get type safety.

自定义

¥Customize

添加全局样式

¥Add global styles

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

¥Here's an example of how to customize the global CSS in Chakra UI.

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

¥Remove global CSS

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

¥If you don't need global CSS, you can remove it by destructuring the globalCss property from the default config.

theme.ts

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

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

更新提供程序

¥Update provider

自定义全局 CSS 后，请务必更新你的提供程序组件以使用新系统。

¥After customizing the global CSS, make sure to update your provider component to use the new system.

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 变量

秘诀