无法更改 Chakra UI 中的默认字体

问题描述

第一次使用 Chakra 并尝试在 Chakra UI 中将默认字体更改为 Times New Roman，但没有任何效果。 是否导入，分配了新主题，将其作为道具传递给 ChakraProvider，但代码中没有任何反应

index.js

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

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


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>

解决方法

您可以在他们的 docs 上了解如何执行此操作。

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,"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

2. 将我们的应用包装在主题中

// 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>

,

您需要定义文本样式。查看更多here。这是给你的捷径：

const theme = extendTheme({
  textStyles: {
    body: {
      fontFamily: 'Times New Roman,sans-serif',},heading: {
      fontFamily: 'Times New Roman,mono: {
      fontFamily: 'Times New Roman,})

在您的文件中：

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