Layer Styles

Overview

Layer styles allow you to define visual properties. The common properties are:

• Color or text color
• Background color
• Border width and border color
• Box shadow
• Opacity

Defining layer styles

Layer styles are defined using the defineLayerStyles function.

import { defineLayerStyles } from "@chakra-ui/react"

const layerStyles = defineLayerStyles({
  container: {
    description: "container styles",
    value: {
      background: "gray.50",
      border: "2px solid",
      borderColor: "gray.500",
    },
  },
})

Built-in layer styles

Chakra UI provides a set of built-in layer styles.

Updating the theme

To use the layer styles, update the theme object with the layerStyles property.

import { createSystem, defineConfig } from "@chakra-ui/react"
import { layerStyles } from "./layer-styles"

const config = defineConfig({
  theme: {
    layerStyles,
  },
})

export default createSystem(defaultConfig, config)

After updating the theme, run the typegen command to generate the typings. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

npx @chakra-ui/cli typegen

Using layer styles

Now you can use layerStyle property in your components.

<Box layerStyle="container">This is inside a container style</Box>