层叠样式
了解如何使用层叠样式定义视觉属性。
概述
层叠样式允许您定义视觉属性。常见的属性有：
- 颜色或文本颜色
- 背景颜色
- 边框宽度和边框颜色
- 盒阴影
- 不透明度
定义层叠样式
层叠样式使用以下方式定义：defineLayerStyles 函数。
layer-styles.ts
import { defineLayerStyles } from "@chakra-ui/react"
const layerStyles = defineLayerStyles({
container: {
description: "container styles",
value: {
background: "gray.50",
border: "2px solid",
borderColor: "gray.500",
},
},
})内置层叠样式
Chakra UI 提供了一系列内置的层叠样式。
layerStylefill.*
fill.muted
fill.subtle
fill.surface
fill.solid
layerStyleoutline.*
outline.subtle
outline.solid
layerStyleindicator.*
indicator.top
indicator.bottom
indicator.start
indicator.end
更新主题
要使用层叠样式，请将 layerStyles 属性添加到 theme 对象中。
theme.ts
import { createSystem, defineConfig } from "@chakra-ui/react"
import { layerStyles } from "./layer-styles"
const config = defineConfig({
theme: {
layerStyles,
},
})
export default createSystem(defaultConfig, config)更新主题后，运行此命令生成类型定义。
npx @chakra-ui/cli typegen使用层叠样式
现在你可以在组件中使用 layerStyle 属性了。
<Box layerStyle="container">This is inside a container style</Box>