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.

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

Styles getting applied after the website has already loaded #387

Closed
pepibumur opened this issue Sep 25, 2019 · 3 comments

Comments

@pepibumur
Copy link

@pepibumur pepibumur commented Sep 25, 2019

Context

I've been using theme-ui in a few websites with no problems. However, when I ported my personal website from styled-system & rebass, I'm running into a weird issue that I couldn't figure out.

What

When the website loads, there are some padding and marging styles that are applied right after the website is loaded. My guess is that the inlined styles are not loaded before the DOM elements are rendered. This is the layout component where the styles are defined.

Not sure if it has to do with how I configured things or it's a bug in theme-UI or Emotion. I'd appreciate if you con point me to where the issue might me coming from.

PS: Thanks for making such a great library for the community.

@jxnblk

This comment has been minimized.

Copy link
Member

@jxnblk jxnblk commented Sep 25, 2019

Not entirely sure what's happening, but I do see some invalid HTML markup – body should not be a child of div – might or might not affect how the browser is rendering things. It also might be worth seeing if disabling gatsby-plugin-emotion has any effect, since it does some things related to SSR

@pepibumur

This comment has been minimized.

Copy link
Author

@pepibumur pepibumur commented Sep 26, 2019

Not entirely sure what's happening, but I do see some invalid HTML markup – body should not be a child of div

Ouch, good catch. I fixed that.

It also might be worth seeing if disabling gatsby-plugin-emotion has any effect, since it does some things related to SSR

I fixed it but the issue keeps happening. I actually added it in case that was the reason why it didn't work. I've also tried removing the <Global/> component from emotion that I'm using to add global styles.

I'm a bit lost, not sure where to debug the issue.

@pepibumur

This comment has been minimized.

Copy link
Author

@pepibumur pepibumur commented Sep 26, 2019

Actually, the issue was having a <body> tag inside the <body> tag that Gatsby already created. After turning it into a <div> the issue went away.

Thanks for the help @jxnblk

@pepibumur pepibumur closed this Sep 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.