文本样式

概述

¥Overview

文本样式允许你定义文本 CSS 属性。常用属性如下：

¥Text styles allows you to define textual css properties. The common properties are:

• 字体：字体系列、粗细、大小

• 行高

• 字母间距

• 文本修饰

• 文本变换

定义文本样式

¥Defining text styles

文本样式使用 defineTextStyles 函数定义。

¥Text styles are defined using the defineTextStyles function.

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",
    },
  },
})

内置文本样式

¥Built-in text styles

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

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

更新主题

¥Update the theme

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

¥To use the text styles, update the theme object with the textStyles property.

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

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

export default createSystem(defaultConfig, config)

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

¥After updating the theme, run this command to generate the typings.

npx @chakra-ui/cli typegen

使用文本样式

¥Using text styles

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

¥Now you can use textStyle property in your components.

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