文本样式

概述

文本样式允许您定义文本 CSS 属性。常见的属性有：

• 字体：字体家族、字重、字号
• 行高
• 字间距
• 文本装饰
• 文本转换

定义文本样式

文本样式通过以下方式定义：defineTextStyles 函数。

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

export const textStyles = defineTextStyles({
  body: {
    description: "The body text style - used in paragraphs",
    value: {
      fontFamily: "Inter",
      fontWeight: "500",
      fontSize: "16px",
      lineHeight: "24",
      letterSpacing: "0",
      textDecoration: "None",
      textTransform: "None",
    },
  },
})

内置文本样式

Chakra UI 提供了一系列内置文本样式。

更新主题

要使用文本样式，请使用 textStyles 属性更新 theme 对象。

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

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

export default createSystem(defaultConfig, config)

更新主题后，运行此命令以生成类型定义。

npx @chakra-ui/cli typegen

使用文本样式

现在您可以在组件中使用 textStyle 属性了。

<Box textStyle="body">This is the body text style</Box>