Layer Styles

Overview

Layer styles allows 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: {
      bg: "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 this command to generate the typings.

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>