Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Global CSS

Learn how to customize global CSS in Chakra UI

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

Example

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)

Previous

CSS Variables

Next

Recipes