next.js 排版主题在Material-UI上无法正常工作(React)

xfyts7mz  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(130)

我有一个经常性的问题,在一个以上的项目材料用户界面的主题,我忽略了,但现在它开始规模。我用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字体系列的最佳方法?

q5iwbnjs

q5iwbnjs1#

在MUI主题中声明字体是可以的,你只需要在应用程序的index.css文件中导入字体,有几种不同的方法,但在我看来这是最简单的。

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

你可以使用谷歌字体来配置,添加/删除一些不同的字体变体。
链接到您的字体here

相关问题