我有一个经常性的问题，在一个以上的项目材料用户界面的主题，我忽略了，但现在它开始规模。我用npx create-next-app@latest --tailwind启动了一个简单的NextJs项目来演示这个问题。
我有下面的mui/theme.js文件，它为Typography设置了一个调色板和一个字体系列：
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: '#020203',
},
secondary: {
main: '#60606e',
},
},
typography: {
fontFamily: [
'Montserrat',
'sans-serif',
].join(','),
},
});
export default theme;我在我的layout.js上使用Material-UI的主题提供程序应用这个主题（导入是可以的），如下所示：
'use client'
import './globals.css'
import { Montserrat } from 'next/font/google';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../../mui/theme';
import { AppBar, Box, Button, Toolbar, Typography } from '@mui/material';
const montserrat = Montserrat({ subsets: ['latin'], weight: ['100', '300', '400', '500', '700'] })
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={montserrat.className}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<div>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
eStore
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
</div>
{children}
</ThemeProvider>
</body>
</html>
)
}我已经确认导入工作正常，因为调色板和我在其他项目中使用的主题的所有其他属性。
所以，我做了这个主页来尝试一下：
'use client'
import { Button, Typography } from '@mui/material'
export default function Home() {
return (
<div>
<div class="mt-5">
Hello in Montserrat from div
</div>
<Typography>
Hello NOT in Montserrat from Typography
</Typography>
<Button variant="outlined">
Hello NOT in Montserrat from Button
</Button>
</div>
)
}homepage（在图像中，我们还可以看到Montserrat字体家族通过“MuiTypography-root”应用）
我可以看到我在项目主体中定义的NextJs中的Montserrat由于div而工作。但是来自Material-UI的组件没有我定义的字体家族，也没有来自主题或主体的字体家族。
那么，最后，什么是全局更改Material-UI字体系列的最佳方法？
1条答案
按热度按时间q5iwbnjs1#
在MUI主题中声明字体是可以的，你只需要在应用程序的
index.css文件中导入字体，有几种不同的方法，但在我看来这是最简单的。你可以使用谷歌字体来配置，添加/删除一些不同的字体变体。
链接到您的字体here。