AMP & react-jss & Next.js #12188

cibulka · 2020-04-25T02:14:55Z

cibulka
Apr 25, 2020

Hello everyone!

I'm experimenting with usage of AMP on Next.js. My first hangup is with styling.

I would really like to continue using react-jss as described in this official example. Is that possible?

I have two versions of my document.js.

First implementation follows the docs. Validator does not complain, but styles are not applied. In developer tools I can see an empty <style amp-custom /> tag. The result is the same whether I type amp-custom attribute to the code or not. When I turn off AMP support for given page, styling works.

import React from 'react';
import Document, {
    Head, Html, Main, NextScript,
} from 'next/document';
import { JssProvider, SheetsRegistry, createGenerateId } from 'react-jss';

export default class JssDocument extends Document {
    static async getInitialProps(ctx) {
        const registry = new SheetsRegistry();
        const generateId = createGenerateId();
        const originalRenderPage = ctx.renderPage;
        ctx.renderPage = () => originalRenderPage({
            enhanceApp: (App) => (props) => (
                <JssProvider registry={registry} generateId={generateId}>
                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                    <App {...props} />
                </JssProvider>
            ),
        });

        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    <style amp-custom>
                        {registry.toString()}
                    </style>
                </>
            ),
        };
    }

    render() {
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

If I pass the styles string as props and render it myself in Head, styles do get applied. However validator throws error "The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'". And indeed, in <head> there is <style> element with my styles and en empty <style amp-custom /> element. So that does not seem like a valid configuration either.

import React from 'react';
import Document, {
    Head, Html, Main, NextScript,
} from 'next/document';
import { JssProvider, SheetsRegistry, createGenerateId } from 'react-jss';

export default class JssDocument extends Document {
    static async getInitialProps(ctx) {
        const registry = new SheetsRegistry();
        const generateId = createGenerateId();
        const originalRenderPage = ctx.renderPage;
        ctx.renderPage = () => originalRenderPage({
            enhanceApp: (App) => (props) => (
                <JssProvider registry={registry} generateId={generateId}>
                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                    <App {...props} />
                </JssProvider>
            ),
        });

        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            styleRegistry: registry,
        };
    }

    render() {
        return (
            <Html>
                <Head>
                    <style amp-custom>
                        {this.props.styleRegistry.toString()}
                    </style>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

What am I missing? Also should I provide a repo or is this sufficient? Thanks in advance!

Dashue · 2020-04-26T16:43:24Z

Dashue
Apr 26, 2020

I also failed to get react-jss working today using CreateUseStyle pattern

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

AMP & react-jss & Next.js #12188

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

AMP & react-jss & Next.js #12188

Uh oh!

cibulka Apr 25, 2020

Replies: 1 comment

Uh oh!

Dashue Apr 26, 2020

cibulka
Apr 25, 2020

Dashue
Apr 26, 2020