How to inject transition global styles only after other global styles are loaded?

Steps to reproduce

I tried to add transitions to body alongside other body styles (e.g CSS reset styles) using createGlobalStyles:

body {
  transition: all 1s ease;
  font-size: 14px;
  color: grey;
}

(The use case for the transition is I will switch the body color and background using styled-theming, and would like it to elegantly transition between light and dark themes.)

Expected Behavior

I would like the transition animation to only apply after the initial global styles have been applied.

Actual Behavior

The transition applies to the other global body styles added alongside it, causing the page to “jump” on page load as things like font size and color resets have transitions applied on them.

[probablyup]

Put the style behind a class and add the class to body on mount of your app On Sat, Oct 13, 2018 at 2:49 AM Stephen Koo [e-mail] wrote:

Steps to reproduce

I tried to add transitions to body alongside other body styles (e.g CSS reset styles) using createGlobalStyles:

body { transition: all 1s ease; }

Expected Behavior

I would like the transition animation to only apply after the initial global styles have been applied. Actual Behavior

The transition applies to the other global body styles added alongside it, causing the page to “jump” on page load as things like font size resets have transitions applied on them.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2094, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1j_X2wrzKS4DkYLMmQUurgFC6gz5ks5ukZsigaJpZM4Xagjf .

[probablyup]

That only apply after full application mount? Probably not. You’ll need some imperative DOM code somewhere to add a class or other DOM marking to signify the initial render pass is complete.