Chakra UI 的主要和次要字体

Question

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

Answer 1

当你说的是次要字体时，我假设这是你的次要字体？如果是这样，您应该注意两件事。它是来自 Chakra UI:

的 textStyles 键和 extendTheme 功能

导入从ChakraUI导入的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

Chakra UI 的主要和次要字体

Primary and secondary font with Chakra UI

javascript

reactjs

fonts

styling

chakra-ui