Chakra UI 的主要和次要字体

Posted 2023-02-19

【中文标题】Chakra UI 的主要和次要字体

【英文标题】：Primary and secondary font with Chakra UI

【发布时间】：2022-01-21 16:59:36

【问题描述】：

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

【参考方案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'，但这更好。