无法更改Chakra中的默认字体

Question

第一次使用脉轮，并试图将默认字体更改为Chakra中的，但没有取得任何效果。是否有一个导入(分配了新主题)将其作为道具传递给ChakraProvider，但代码中没有发生任何事情。

index.js

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

const customTheme = {
    fonts: {
        body: 'Times New Roman, sans-serif',
        heading: 'Times New Roman, sans-serif',
        mono: 'Times New Roman, sans-serif', }


const theme = extendTheme({customTheme})

ReactDOM.render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <App/>
        </ChakraProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

我的文本组件似乎没有改变

import {Text} from '@chakra-ui/react'
<Text> Some text </Text>

Answer 1

您可以在他们的文档上看到如何做到这一点。

1. 创建一个theme.js文件，在该文件中我们将覆盖默认主题

在此处添加以下内容：

// importing the required chakra libraries
import { theme as chakraTheme } from '@chakra-ui/react'
import { extendTheme } from "@chakra-ui/react"

// declare a variable for fonts and set our fonts. I am using Inter with various backups but you can use `Times New Roman`. Note we can set different fonts for the body and heading.
const fonts = {
  ...chakraTheme.fonts,
  body: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`,
  heading: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`
}

// declare a variable for our theme and pass our overrides in the e`xtendTheme` method from chakra
const customTheme = extendTheme(overrides)

// export our theme
export default customTheme

1. 在主题中包装我们的应用程序

// import our theme
import theme from '../customTheme.js'

// wrap our application with the theme. This can be passed onto the ChakraProvider.
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

Answer 2

我可以看出您的extendTheme用法是错误的。

const theme = extendTheme({customTheme})花括号不应该在那里。这基本上是指：

const theme = {
   customTheme: { // <-- it adds the custom theme as a customTheme property
      fonts: {
         ...
      }
   }
}

只要去掉花括号，你就可以走了！

Answer 3

这适用于我使用脉轮和nextjs。

创建一个文件styles.css

@font-face {
  font-family: "Font";
  src: url('../your/path/Font.woff');
  font-weight: normal;
  font-style: normal;
}

在你的index.js里

import '../path/styles/styles.css'