next.js - 在 Next js 中使用脉轮 UI 中的字体

Question

我的应用程序是使用 NextJs 构建的，并使用 Chakra UI。我已经按照这个安装了谷歌字体

脉轮谷歌字体

npm install @fontsource/open-sans @fontsource/raleway

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

const theme = extendTheme({ fonts: { heading: "Open Sans", body: "Raleway", }, })

导出默认主题

现在我可以使用两种不同的字体，

1. 对于身体
2. 对于标题

但是，使用更多字体怎么样？假设我要为按钮使用不同的字体，为文本使用不同的字体。同样在文本中，我想为斜体和带下划线的文本部分使用不同的字体。

我怎么做 ？

标签： next.jschakra-ui

Answer 1

要在 Buttons 中使用不同的字体，您可以从主题中自定义 Buttons 组件。components在 const 主题中，与创建对象所需的字体相同：

const theme = extendTheme({ 
    fonts: { 
        heading: "Open Sans", body: "Raleway", 
    }, 
    components: {
        Button: {
            baseStyle: {
                fontFamily: 'yourfont here'
            }
        }
    }
})

您可以对按钮的其他状态执行相同操作，例如_hover、_focus、_isDisabled等。