component defined in _document not getting it's styles sent to the browser #15943

omar-dulaimi · 2020-08-06T15:59:32Z

omar-dulaimi
Aug 6, 2020

Hello,
I have the following custom _document:

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

    render() {
        return (
            <Html lang="en">
                <Head />
                <body>
                    <Main />
                    <NextScript />
                    <MobileBarController />
                </body>
            </Html>
        );
    }
}

and the component in question, MobileController:

function MobileBarController() {
    return (
            <div className="mobile-bar">
                <div>
                    <Link href={`/search`} prefetch={false}>
                        <a
                            className="d-inline-block text-center"
                            style={{ textDecoration: 'none', color: darkColor }}
                        >
                            <Search
                                width="23px"
                                height="23px"
                                color={darkColor}
                                style={{ display: 'block', margin: '0 auto' }}
                            />
                            <div className="icon-lbl">
                                <span>search</span>
                            </div>
                        </a>
                    </Link>
                </div>
                <div>
                    <Link href="/user" prefetch={false}>
                        <a
                            className="d-inline-block text-center"
                            style={{ textDecoration: 'none', color: darkColor }}
                        >
                            <PermIdentity
                                width="23"
                                height="23"
                                color={darkColor}
                                style={{ display: 'block', margin: '0 auto' }}
                            />
                            <div className="icon-lbl">
                                <span>my account</span>
                            </div>
                        </a>
                    </Link>
                </div>
                <div>
                    <Link href="/" prefetch={false}>
                        <a
                            className="d-inline-block text-center"
                            style={{ textDecoration: 'none', color: darkColor }}
                        >
                            <Home
                                width="23"
                                height="23"
                                color={darkColor}
                                style={{ display: 'block', margin: '0 auto' }}
                            />
                            <div className="icon-lbl">
                                <span>home</span>
                            </div>
                        </a>
                    </Link>
                </div>
                <div>
                    <Link href="/install" prefetch={false}>
                        <a
                            className="d-inline-block text-center"
                            style={{ textDecoration: 'none', color: darkColor }}
                        >
                            <Notifications
                                width="23"
                                height="23"
                                color={darkColor}
                                style={{ display: 'block', margin: '0 auto' }}
                            />
                            <div className="icon-lbl">
                                <span>notifications</span>
                            </div>
                        </a>
                    </Link>
                </div>
                <div>
                    <Link href={`/new-list`} prefetch={false}>
                        <a
                            className="d-inline-block text-center"
                            style={{ textDecoration: 'none', color: darkColor }}
                        >
                            <AddCircleOutLine
                                width="23"
                                height="23"
                                color={darkColor}
                                style={{ display: 'block', margin: '0 auto' }}
                            />
                            <div className="icon-lbl">
                                <span>add listing</span>
                            </div>
                        </a>
                    </Link>
                </div>

            <style jsx global>
                {`
                    .mobile-bar {
                        position: fixed;
                        bottom: 0;
                        left: 0;
                        width: 100vw;
                        display: none;
                        background: #fff;
                        height: 52px;
                        z-index: 2000;
                        border-top: 1px solid ${primaryColor};
                    }
                    .mobile-bar > div {
                        width: 20%;
                        text-align: center;
                        padding-top: 5px;
                    }
                    .icon-lbl {
                        display: block;
                        height: 22px;
                        position: relative;
                    }
                    .icon-lbl span {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 12px;
                        white-space: nowrap;
                    }
                    .active-tab {
                        background: ${primaryColor};
                    }
                    @media only screen and (max-width: 1000px) {
                        .mobile-bar {
                            display: flex;
                        }
                    }
                `}
            </style>
        </div>
    );
}

Now the styles for MobileController don't get sent to the browser, I checked and it seems that all it's styles don't exist.

On the page I'm testing, I have getStaticProps enabled.

Any Ideas?

Answered by laugharn

Aug 6, 2020

https://nextjs.org/docs/advanced-features/custom-document#caveats

React components outside of <Main /> will not be initialized by the browser. Do not add application logic here or custom CSS (like styled-jsx). If you need shared components in all your pages (like a menu or a toolbar), take a look at the App component instead

View full answer

laugharn · 2020-08-06T16:32:01Z

laugharn
Aug 6, 2020
Collaborator

https://nextjs.org/docs/advanced-features/custom-document#caveats

React components outside of <Main /> will not be initialized by the browser. Do not add application logic here or custom CSS (like styled-jsx). If you need shared components in all your pages (like a menu or a toolbar), take a look at the App component instead

1 reply

omar-dulaimi Aug 7, 2020
Author

Thanks a lot.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

component defined in _document not getting it's styles sent to the browser #15943

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

component defined in _document not getting it's styles sent to the browser #15943

Uh oh!

omar-dulaimi Aug 6, 2020

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

laugharn Aug 6, 2020 Collaborator

Uh oh!

omar-dulaimi Aug 7, 2020 Author

omar-dulaimi
Aug 6, 2020

Replies: 1 comment 1 reply

laugharn
Aug 6, 2020
Collaborator

omar-dulaimi Aug 7, 2020
Author