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.

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.

npm run prepare

pnpm run prepare

deno run npm:prepare

bun run prepare

Using layer styles

Now you can use layerStyle property in your components.

<Box layerStyle="outline.subtle" />

To utilize in the css function:

css({ layerStyle: 'outline.subtle' })