gpt4 book ai didi

material-ui - MUI 覆盖自定义 Roboto 字体

转载 作者:行者123 更新时间:2023-12-05 05:32:31 35 4
gpt4 key购买 nike

似乎重写 CSSBaseline 是行不通的。

我正在使用 Next.js 和 MUI 库构建一个网站,但我似乎无法使字体自定义正常工作。我试图按照指南进行操作,但没有任何效果。不知道是不是和CssBaseline主题有关。

_app.tsx

import { createTheme, ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const theme = createTheme({
typography: {
fontFamily: [
'"IBM Plex Sans"',
].join(','),
},
components: {
MuiCssBaseline: {
styleOverrides: {
"@font-face": {
fontFamily: "IBM Plex Sans",
src: `url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap')`
},
}
}
}
});

export default ({Component, pageProps}:any) => <><CssBaseline /><ThemeProvider theme={theme}><Component {...pageProps} /></ThemeProvider></>

_document.tsx

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<style>@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');</style>

</Head>
<body><Main /><NextScript /></body>
</Html>
)
}

SOLVED: Had to put the baseline element inside the theme provider. Duh!

最佳答案

已解决:必须将基线元素放入主题提供程序中。呸!

关于material-ui - MUI 覆盖自定义 Roboto 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74068010/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com