Chakra UI 的主要和次要字体答案

【问题标题】：Primary and secondary font with Chakra UIChakra UI 的主要和次要字体
【发布时间】：2025-12-14 22:40:01
【问题描述】：

我正在将 Chakra Ui 与 React 一起使用，并且我正在尝试为两个组件使用两种不同的字体，我已经使用文档中描述的全局方法导入了它们，但是如何在当前组件中只使用辅助字体？

【问题讨论】：

标签： javascript reactjs fonts styling chakra-ui

【解决方案1】：

当您的意思是次要字体时，我假设这是您的次要字体？如果是这样，您应该注意两件事。这是 Chakra UI 中的 textStyles 键和 extendTheme 函数：

导入从 Chakra UI 导入的 extendTheme 函数。
```
import { extendTheme } from "@chakra-ui/react"
```

使用 extendTheme 功能可以让您添加新样式。这是您将放置 textStyles 键的位置：

const themeExample = extendTheme({
    // Whatever you pass here will be ADDED to the theme.
    textStyles: { 
        primary: {
            fontFamily: "Font Primary"
        },
        secondary: {
            fontFamily: "Font Secondary"
        },
    },
});

现在所需的字体已经设置好了，它们很容易访问：

<Box textStyle='primary'>Component One</Box>
<Box textStyle='secondary'>Component Two</Box>

更多信息可以在这里找到：https://chakra-ui.com/docs/features/text-and-layer-styles

【讨论】：

谢谢！我在想要应用字体的元素上使用了 fontFamily='Secondary Font Name'，但这更好。