图层样式

概述

¥Overview

图层样式允许你定义视觉属性。常用属性如下：

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

• 颜色或文本颜色

• 背景颜色

• 边框宽度和边框颜色

• 盒子阴影

• 不透明度

定义图层样式

¥Defining layer styles

图层样式使用 defineLayerStyles 函数定义。

¥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 提供了一组内置图层样式。

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

更新主题

¥Updating the theme

要使用图层样式，请使用 layerStyles 属性更新 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 type definitions.

npx @chakra-ui/cli typegen

使用图层样式

¥Using layer styles

现在你可以在组件中使用 layerStyle 属性。

¥Now you can use layerStyle property in your components.

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