如何解决无法更改 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 上了解如何执行此操作。
- 创建一个 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
- 将我们的应用包装在主题中
// 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。