Как узнать, являются ли стили на стороне сервера против стороны клиента - PullRequest
Новая
       63

Как узнать, являются ли стили на стороне сервера против стороны клиента

0 голосов
/ 12 апреля 2020

Я сейчас настраиваю новый проект React. Любой, кто использовал styled-components вместе с React, знает, что для запуска этого механизма требуется небольшая настройка.

Вот как я реализовал свою настройку на основе документов styled-components & Next.js :

Пакет. json

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

.babelr c: 

{
    "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 ...

В любом случае, если я выключу уведомления, чтобы предупредить меня о проблеме, я не могу знать, когда или если стили поступают с сервера или клиента.

Как вы определяете, визуализируются ли стили на стороне сервера или на стороне клиента?

...