Блог

Главная - Вопросы по программированию - Импорт пользовательского шрифта Google в Next.js проект с установленным интерфейсом Material-UI

Импорт пользовательского шрифта Google в Next.js проект с установленным интерфейсом Material-UI

#reactjs #material-ui #next.js

Вопрос:

Ни за что на свете я не могу изменить стиль шрифта по умолчанию Next.js проект с установленным пользовательским интерфейсом Material.

Вот _document.js код, в который я импортирую шрифт в заголовке:

 import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
import theme from "../src/theme";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Lobsteramp;display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

Это код в том _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 "../src/theme";

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

  React.useEffect(() => {
    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}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  );
}

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

In the theme.js file, I set the typography:

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

// Create a theme instance.
const theme = createTheme({
  typography: {
    fontFamily: "'Lobster', sans-serif",
    textTransform: "none",
  },
});

export default theme;

Я ожидаю, что проект изменится на шрифт в стиле Lobster. Вместо этого это Робото.

Метки: