无法使用样式化组件和 Next.js 导入 Google 字体
Posted
技术标签:
【中文标题】无法使用样式化组件和 Next.js 导入 Google 字体【英文标题】：Can't import Google Fonts with Styled Components and Next.js 【发布时间】：2020-12-03 21:13:15 【问题描述】：我在尝试加载 Google 字体时遇到了以下问题。我读到我应该在_document.js 中写这样的东西来将它导入到头部标签中
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 文件以使用 Google 字体的样式？
另外，如果有任何帮助，这是我正在使用的 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;
【问题讨论】：
请注意，您可以使用 npmjs.com/package/styled-reset-advanced 或 npmjs.com/package/styled-reset 在全局样式中注入 CSS 重置 ;) 【参考方案1】：前往此页面。
https://nextjs.org/docs/advanced-features/custom-app
请阅读自定义_app.js，然后执行以下操作：
首先，您需要为您的应用创建一个自定义_app.js。 （这必须在您的页面目录的根目录中）
那你需要在同一目录下创建_app.css
然后将css文件导入你的_app.js
import "./_app.css";
然后在您的 _app.css 文件中，导入您的 google 字体，如下所示：
@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..
【讨论】：
我忘记了_app.js 是一个东西，所以我尝试从import Head from 'next/head' 添加一个Head 标签，它成功了以上是关于无法使用样式化组件和 Next.js 导入 Google 字体的主要内容，如果未能解决你的问题，请参考以下文章
使用 next.js 和样式化组件重新加载时的 Flash Of Unstyled Text (FOUT)
如何在 react 和 next js 中使用 Styled 组件创建全局样式，使用 css 文件和 styled 组件的组合是不是更好？