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

Global styles not applied until page refresh #885

Closed
thisbejim opened this issue Jan 25, 2017 · 4 comments
Closed

Global styles not applied until page refresh #885

thisbejim opened this issue Jan 25, 2017 · 4 comments

Comments

@thisbejim
Copy link

When applying global styles to a custom document the styles are not applied until you refresh the page, example:

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

export default class MyDocument extends Document {
  render () {
    return (
      <html>
        <Head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
          <style jsx global>{`.welcome { color: red; }`}</style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
};

index.js

export default () => (
  <div className="welcome">Welcome to next.js!</div>
)

If you close your localhost tab, npm run dev, then open up a fresh tab you will get this:
snip20170126_1

If you refresh the page you get this:
snip20170126_2

This also happens when you serve a production build of the project.
@arunoda
Copy link
Contributor

arunoda commented Jan 26, 2017

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)

@arunoda arunoda mentioned this issue Jan 26, 2017
Closed
@timneutkens
Copy link
Member

@arunoda actually we've seen this before. using styled-jsx inside of <Head> is not supported. Since it won't render an element. In this case styled-jsx is obsolete since
<style>{.welcome { color: red; }}</style> will be global. Using just the <style> fixes your issue 👍

@arunoda arunoda mentioned this issue Jan 30, 2017
Closed
@timneutkens timneutkens mentioned this issue Feb 8, 2017
Closed
mcansh added a commit to mcansh/blog that referenced this issue Aug 16, 2017
@mcansh
should help with initial global styling vercel/next.js#885
8d59345
@nontachaiwebdev
Copy link

I fixed with <style /> thankyou @timneutkens but I have a question.
Why it work?

@maxis1718 maxis1718 mentioned this issue Apr 26, 2018
Merged
@lock
Copy link

lock bot commented May 10, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@lock lock bot locked as resolved and limited conversation to collaborators May 10, 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
4 participants
@arunoda @timneutkens @thisbejim @nontachaiwebdev