如何知道样式是服务器端还是客户端

Question

我目前正在建立一个新的React项目。任何将styled-components与React一起使用的人都知道，要使这种机器运转，需要进行一些设置。

这是我根据styled-components和Next.js文档进行设置的方式：

Package.json

"styled-components": "^5.1.0"
"babel-plugin-styled-components": "^1.10.7",

.babelrc：

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

下一个_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();
        }
    }
}

这几乎完全按照文档中概述的方式实现，但是，我（有时！）在服务器端classNames和客户端classNames之间不匹配...

无论如何，如果我关闭通知以警告我这个问题，我将无法知道何时或是否样式来自服务器或客户端。

您如何确定样式是在服务器端还是客户端渲染？