<style global jsx /> 似乎没有应用答案

【问题标题】：<style global jsx /> doesn't seem to be applied<style global jsx /> 似乎没有应用
【发布时间】：2019-12-03 23:00:34
【问题描述】：

我有自定义的_document 文件，其内容如下。由于某些原因，<style global jsx /> 中指定的样式似乎并未应用于第一次渲染。在开发中，当我刷新页面时它们会被应用，但是当我为静态导出构建网站时，即使刷新后它们也不会应用。

import { ServerStyleSheets } from '@material-ui/styles';
import Document, { Head, Main, NextScript } from 'next/document';
import React, { Fragment } from 'react';

class MyDocument extends Document {
  static async getInitialProps(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: (
        <Fragment>
          {initialProps.styles}
          {sheets.getStyleElement()}
        </Fragment>
      )
    };
  }

  render() {
    return (
      <html lang="en">
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"
            rel="stylesheet"
          />

          <style global jsx>{`
            html {
              font-size: 16px;
            }

            a {
              text-decoration: none;
            }

            #__next {
              position: relative;
              display: flex;
            }

            #__next-prerender-indicator {
              display: none;
            }
          `}</style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;

【问题讨论】：

我认为是<style jsx global> 标签而不是<style global jsx>。
似乎不是问题，位置改变的行为相同
检查这个 - github.com/zeit/next.js/wiki/Global-styles-and-layouts
还有这个 - github.com/zeit/styled-jsx#global-styles

标签： reactjs styles jsx next.js

【解决方案1】：

您应该将全局样式添加到_app。至于为什么它在_document 中不起作用，请查看https://github.com/zeit/styled-jsx#server-side-rendering

我不确定它是否会起作用，但你可以做

import Document, { Html, Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    initialProps.styles = flush()
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"
            rel="stylesheet"
          />

          <style global jsx>{`
            html {
              font-size: 16px;
            }

            a {
              text-decoration: none;
            }

            #__next {
              position: relative;
              display: flex;
            }

            #__next-prerender-indicator {
              display: none;
            }
          `}</style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}


export default MyDocument;

【讨论】：

您应该将全局样式添加到 _app - 这是正确的答案！谢谢@evgeni fotia！