Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styles do not get applied from _document.js with getInitialProps are called #1035

Closed
khrome83 opened this issue Feb 8, 2017 · 6 comments
Closed

Styles do not get applied from _document.js with getInitialProps are called #1035

khrome83 opened this issue Feb 8, 2017 · 6 comments

Comments

@khrome83
Copy link
Contributor

khrome83 commented Feb 8, 2017

As of next version "next": "^2.0.0-beta.22"

Whenever you use a _document.js fragment to overwrite the default construction of the page document, styles are not applied when getInitialProps() is used.

If you comment out getInitialProps(), then styles will be applied. They DO NOT however hot load, and require a page refresh. Change to use <styled jsx global> does not resolve issue.

Expected that styled jsx applies styles (global or not) regardless of the use of getInitalProps(). Also expected to hot load like any other page in the application.

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    const page = renderPage()
    return { ...page }
  }

  render () {
    return (
      <html>
        <Head>
          <title>Site Title</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
        <style jsx global>{`
          html, body {
            background-color: #f00;
            font-size: 16px;
            color: #fef;
          }
          p {
            color: red;
          }
        `}</style>
      </html>
    )
  }
}
@khrome83
Copy link
Contributor Author

khrome83 commented Feb 8, 2017

Can validate that this occurs with next@2.0.0-beta.24 as well.

@timneutkens
Copy link
Member

Duplicate of #885

@khrome83
Copy link
Contributor Author

khrome83 commented Feb 8, 2017 •
edited
Loading

@timneutkens this is not a duplicate.

These styles are not within the <head>. Additionally it is not just the missing hot reloading, these styles are NOT applied if getInitialProps() is called. This is definitely not a duplicate ticket. Please reopen.

@timneutkens
Copy link
Member

From Arunoda's reply on that ticket:

Not exactly sure about how this happens.
But you should not styles like this with the custom document.
Whole purpose of the custom document should to customize your HTML page. Inside the custom layout, we don't have access to the React app.
So, try to move your styles to a common layout.
See this related discussion: #873 (comment)

From my reply on that ticket:

<style>{.welcome { color: red; }}</style> will be global. Using just the <style> fixes your issue 👍

The issue here is that you're using styled-jsx inside of <Document /> also, <Document /> is not hot reloaded by design afaik. The way to go here as Arunoda said is using a layout HOC: https://github.com/zeit/next.js/tree/master/examples/layout-component

@khrome83
Copy link
Contributor Author

khrome83 commented Feb 8, 2017 via email

@timneutkens
Copy link
Member

timneutkens commented Feb 8, 2017 •
edited
Loading

Sorry for closing it without the actual explanation 😅

@lock lock bot locked as resolved and limited conversation to collaborators May 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@khrome83 @timneutkens