javascript - 无法更改 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, 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>
解决方案
你可以在他们的文档上看到如何做到这一点。
- 创建一个 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
- 将我们的应用程序包装在主题中
// 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>
推荐阅读
- ios - 在 Swift 中通过多个委托链接 UIButton 点击
- c++ - 与 std::cout 一样将参数传递给成员函数
- symfony - 如何在写入数据之前使用 API-Platform 事件改变数据
- node.js - nodejs在远程linux服务器上执行命令
- jquery - 为每张图片添加链接
- reactjs - 更改路线时反应状态为空
- parent-child - 自定义无模式对话框类不可见
- azure - 存储数据源凭据超时
- sql-server - 基于 SELECT TOP 1 的 UPDATE 查询性能缓慢
- google-beacon-platform - 我已收到我的业务的 google 信标,但我无法让它们出现在信标工具应用程序上