个人中心
gpt4 book ai didi

css - 无法使用样式化组件和 Next.js 导入 Google 字体

转载 作者：行者123 更新时间：2023-12-04 16:39:42 26 4
gpt4 key购买 nike

尝试加载 Google 字体时遇到以下问题。我读到我应该在 _document.js 中写这样的东西将其导入到 head 标签中

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="preload"
            href="/fonts/noto-sans-v9-latin-regular.woff2"
            as="font"
            crossOrigin=""
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;
但这是我必须使用的代码才能使 Styled Components 与 Next.js 一起工作 
import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
所以我的问题是:如何修改我的 _document.js文件使用谷歌字体的样式？
另外，如果有任何帮助，这是我正在使用的 GlobalStyle，它不会导入字体 
import { createGlobalStyle } from '@xstyled/styled-components';

const GlobalStyle = createGlobalStyle`

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Rubik&display=swap');

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; 
    position: relative;
    background: grey;
}

body {
  font-family: 'Lato', sans-serif;
}
`;

const BasicLayout = ({ children }: { children: any }) => {
  return (
    <>
      <GlobalStyle />
      {children}
    </>
  );
};

export default BasicLayout;

最佳答案

前往此页面。
https://nextjs.org/docs/advanced-features/custom-app
请阅读关于定制 _app.js然后执行以下操作:
首先，您需要创建一个自定义 _app.js为您的应用程序。 (这必须在您的页面目录的根目录中)
然后你需要创建_app.css在同一个目录
然后将 css 文件导入您的 _app.js

import "./_app.css";
然后在您的 _app.css文件，导入您的谷歌字体，如下所示: 
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&display=swap");
在 css 文件和 body 标签中添加以下行: 
body {
  font-family: "PT Sans Narrow", sans-serif;
  etc..
}

关于css - 无法使用样式化组件和 Next.js 导入 Google 字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63405017/

26 4 0
文章推荐： substrate - Substrate 中的事件模式
文章推荐： skrollr - 如何在手机上修复 Skrollr？
文章推荐： r - R 包 dplyr 中的 head() 函数
文章推荐： c# - Visual Studio 2019 项目模板仅针对某些类型的项目显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com