question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[V2]How to add default style for first render...

See original GitHub issue

Really appreciate your work on version2 ! And I find a problem when I am going to upgrade to V2. As we know the best practice is rendering the HTML and CSS first, and then execute the JS, so that customer can get the rendered web content earlier.

In version 1, we can use @import "../../node_modules/react-select/scss/default"; in our scss file, and put the css in <head></head>. So it will render correct for first render.

But for now, react-select turn to emotion and write the css in js, So I can’t get the css or scss file…

First render scrennshot with 2 different version:

screen shot 2018-08-30 at 2 35 29 pm

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:5
  • Comments:6

github_iconTop GitHub Comments

1reaction
wszgxacommented, Oct 15, 2018

@hugotox

Your style have risk in production. The classcss-19bqh2r, is generate by emotion, it may be changed in future if you update the react-select’s version.

If you react-select’s version is not fixed, it may upgrade the min version automatically.

1reaction
MaxInMooncommented, Sep 6, 2018

Same problem with a server-side (isomorphic) page

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Set Default Style to a React Component | Pluralsight
In this guide, you'll learn how to set the default styles to your React components. CSS in JS. Consider a simple React component...
Read more >
css - Component is briefly rendering without styles on first render
I set the width with an inline style based on the props. As I understand, the component has the inline style as it...
Read more >
How To Style React Components | DigitalOcean
Now add the styles. First, open the CSS for the Alert component: nano src/components/Alert/Alert.css.
Read more >
roblox textures
Wrap -- wrap so length can be set by TextureLength beam. ... addition to avatar types for Roblox, first revealed during Roblox Developers...
Read more >
Style Sheets in HTML documents - W3C
Sometimes it's useful to include rendering instructions within the document ... Authors should use the META element to set the default style sheet...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found