Nextjs 在使用 babel-plugin-styled-components 时抛出类名不匹配错误答案

【问题标题】：Nextjs throwing classnames do not match error when using babel-plugin-styled-componentsNextjs 在使用 babel-plugin-styled-components 时抛出类名不匹配错误
【发布时间】：2020-12-17 15:57:51
【问题描述】：

我已经从下一个样式组件示例中复制了 _document.js，并且我正在使用样式组件文档中的 babel 插件，但我仍然收到错误。

_document.js

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        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()
        }
    }
}

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "babel-plugin-styled-components"
        ]
    ]
}

周三刚开始使用 next ，所以该技术还相当新，但我查看了所有文档，这似乎是应该工作的，但我仍然收到错误，有什么想法吗？

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering styled-components

【解决方案1】：

您不是在 render() 之后返回 () 任何 jsx。这很可能是您的问题。您还应该从“next/document”导入 Html、Head、Main 和 NextScript。

要解决您的问题，请尝试如下重构：

import Document { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        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()
        }
    }
   render() {
        return (
            <Html lang='en'>
                <Head>
                    <meta charSet='utf-8' />
                    {this.props.styles}
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
   } 
}

然后在 _app.jsx 中，您将从 styled-components 导入 { ThemeProvider }。 ThemeProvider 包装了从另一个文件导入的自定义 styled-components GlobalTheme JSX 元素。以下 sn-p 是我几个月前建立的一个项目的打字稿。大多数都与 AppProps 花絮有关：

import Head from "next/head";
import { AppProps } from "next/app";
import { ThemeProvider } from "styled-components";
import { GlobalStyle, theme } from "../shared";

export default function App({ Component, pageProps }: AppProps) {
    return (
        <ThemeProvider theme={theme}>
            <GlobalStyle theme={theme} />
            <Head>
                <title>Next.js</title>
            </Head>
            <main className="main">
               <Component {...pageProps} />
            </main>
        </ThemeProvider>
    )
}

【讨论】：