加载字体以自定义Next.js中的材质-UI主题不起作用

ewm0tg9j 于 2023-02-04 发布在其他

关注(0)|答案(5)|浏览(214)

在Next.js中使用Material-UI时，我试图向我的theme.js添加不同的字体。
我已经尝试使用这里建议的fontfaceobserver（https://github.com/zeit/next.js/issues/512），但是无法更新主题。

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Raleway','Roboto Condensed',
    ].join(','),
    fontWeight: 700,
    h1:{
      fontFamily: 'Raleway',
      fontWeight: 700,
    }
  },
});

我的h1字体没有改变：（

next.js

来源：https://stackoverflow.com/questions/58139833/loading-fonts-to-customize-material-ui-theme-in-next-js-not-working

5条答案

按热度按时间

jhdbpxl91#

如果要将自托管字体添加到next.js项目
将您的-font.ttf复制到public/fonts文件夹
创建一个新的css文件，例如your-font.css（在public/fonts/中），并添加以下代码：

@font-face {
  font-family: 'your-font';
  font-weight: normal;
  font-style: normal;
  src: url('./your-font.ttf');
}

转到第/_document. js页并将此行添加到<Head>标记内

<link rel="stylesheet" href="/fonts/your-font.css" />

为材质ui创建一个theme.js文件，并将字体添加到Typography：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme(
  {
    typography: {
      fontFamily: [
        'your-font',
        'Arial',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
    },
  },
);

export default theme;

转到pages/_app. js并添加您的主题，例如：

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../common/theme';//location of theme file created in previous step

export default function MyApp(props) {
  const { Component, pageProps } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}> {/*<---- Add this */}
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

赞(0）回复(0）举报 2023-02-04

e0uiprwp2#

不管是谁，答案实际上就在我使用的Material-ui和Next.js示例项目中：
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
你可以看到google字体是如何导入的：

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="shortcut icon" href="/static/favicon.ico" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
          <meta name="emotion-insertion-point" content="" />
          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

赞(0）回复(0）举报 2023-02-04

5anewei63#

你的theme.js文件做得很好，所以你的下一步应该是创建一个Layout组件或者使用你的**_app.js**文件来提供你的自定义主题。

布局组件中。

import { ThemeProvider } from "@material-ui/core";

<ThemeProvider theme={theme}>
  {children}
  <h1>MY TEXT</h1> // now this h1 tag will be displayed with your font
</ThemeProvider>

有关详细信息https://material-ui.com/customization/typography/

赞(0）回复(0）举报 2023-02-04

2hh7jdfx4#

基于这个tutorial

全局.css

@font-face {
  font-family: GothamMedium;
  src: url("/fonts/GothamRnd-Medium.woff2");
  format: ("woff2");
  font-display: swap;
}

在MUI中使用字体

import "../styles/globals.css";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Typography } from "@mui/material";

export let theme = createTheme({});

function MyApp({ Component }) {
  return (
        <ThemeProvider theme={theme}>
            <Typography>Hello world from typography component</Typography>
            <p>Hello world from paragraph tag</p>
            <Component {...pageProps} />
        </ThemeProvider>
  );
}

export default MyApp;

使用与您之前在CSS中使用的字体相同的名称：

export let theme = createTheme({
  typography: {
    fontFamily: "GothamMedium, sans-serif",
  }
});

赞(0）回复(0）举报 2023-02-04

6jjcrrmo5#

Nextjs 13中的任何人都可以对本地字体执行此操作（对Google字体也是如此）：
输入theme.config.tsx

import localFont from "@next/font/local";
import { NextFont } from "@next/font";

const customFont: NextFont = localFont({
  src: "../public/fonts/Montserrat-VariableFont_wght.ttf",
  display: "swap",
});

const theme = createTheme({

typography: {
    fontFamily: customFont.style.fontFamily,
  },
});

export const ThemeConfig: React.FC<ThemeProps> = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
};

赞(0）回复(0）举报 2023-02-04

我来回答

加载字体以自定义Next.js中的材质-UI主题不起作用

5条答案

相关问题

热门标签

最新问答