Dynamic global styles with SSR issue

Current behavior:

style tags generated by <Global /> components appear in front of style tags generated by SSR:

As a result, the dynamically calculated global styles cannot override the styles in the SSR:

To reproduce:

https://codesandbox.io/s/snowy-violet-tq704

Expected behavior:

The style generated by SSR should appear first:

Environment information:

• react version: 17
• @emotion/react version: 11

[oliviertassinari]

cc @mnajdova in case you want to work on https://github.com/emotion-js/emotion/issues/2158#issuecomment-761696862

[oliviertassinari]

The workaround proposed by @zce seems to do it.

    <React.Fragment>
      <Global
        styles={{
          body: {
            backgroundColor: darkmode ? "#000" : "#fff",
          },
        }}
      />
      <CacheProvider value={cache}>
        <Component {...pageProps} />
        <button onClick={() => setDarkMode((prevState) => !prevState)}>
          switch to {darkmode ? "light" : "dark"} mode!
        </button>
      </CacheProvider>
    </React.Fragment>

The only downside is one invalid HTML markup. It’s OK-ish for a temporary solution. The global style can be rendered before any other content of the body. The warning only happens once, not flooding / burying the other important potential errors too much. However, in the long term, we need to fix it.

---

@Andarist We will keep it in mind, thanks for taking the time to share pointers on how you envision the solution. Maybe we can come back to it once we release v5 stable.