React-select: [V2]How to add default style for first render...

Created on 30 Aug 2018 · 5Comments · Source: JedWatson/react-select

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

issubug-unconfirmed issureviewed

Source

wszgxa

👍5

All 5 comments

Same problem with a server-side (isomorphic) page

MaxInMoon on 6 Sep 2018

👍1

hugotox on 14 Sep 2018

Really nobody has a solution for this? I did something horrible but works 😤:
```
.css-10nd86i {
position: relative;
box-sizing: border-box;
}

    .css-1aya2g8 {
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: hsl(0, 0%, 98%);
      border-color: hsl(0, 0%, 80%);
      border-radius: 4px;
      border-style: solid;
      border-width: 1px;
      cursor: default;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      min-height: 38px;
      outline: 0 !important;
      position: relative;
      -webkit-transition: all 100ms;
      transition: all 100ms;
      box-sizing: border-box;
    }

    .css-1rtrksz {
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 2px 8px;
      -webkit-overflow-scrolling: touch;
      position: relative;
      box-sizing: border-box;
    }

    .css-1492t68 {
      color: hsl(0, 0%, 50%);
      margin-left: 2px;
      margin-right: 2px;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      box-sizing: border-box;
    }

    .css-rsyb7x {
      margin: 2px;
      padding-bottom: 2px;
      padding-top: 2px;
      visibility: visible;
      color: #222;
      box-sizing: border-box;
    }

    .css-1wy0on6 {
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
      align-self: stretch;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .css-d8oujb {
      -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
      align-self: stretch;
      background-color: hsl(0, 0%, 80%);
      margin-bottom: 8px;
      margin-top: 8px;
      width: 1px;
      box-sizing: border-box;
    }

    .css-1ep9fjw {
      color: hsl(0, 0%, 80%);
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding: 8px;
      -webkit-transition: color 150ms;
      transition: color 150ms;
      box-sizing: border-box;
    }

    .css-19bqh2r {
      display: inline-block;
      fill: currentColor;
      line-height: 1;
      stroke: currentColor;
      stroke-width: 0;
    }```

hugotox on 14 Oct 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.

wszgxa on 15 Oct 2018

👍1

This is actually a significant regression. I've come to use NoSSR to prevent the jump this provokes on the page but its still jarring.