chrome user agent stylesheet annoyingly has a default margin of 8px around my website... how/where do you add body css to override that globally? I tried using/importing { createGlobalStyle } from 'styled-components' but that didn't seem to work, probably because my implementation was all trial and error guessing
"""const GlobalStyle = createGlobalStyle
body {
margin: 0
} """
i then wrapped the above component around my app, and all it did was make the contents of my app disappear like whiteout :-(
Well one major issue is you shouldn't wrap your app with the GlobalStyle component.
This is a common mistake actually, but you'll notice that GlobalStyle isnt a react component and it does not take children as a prop so anything inside won't be rendered.
Instead you need to render it as a self closing tag <GlobalStyle />
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
chrome user agent stylesheet annoyingly has a default margin of 8px around my website... how/where do you add body css to override that globally? I tried using/importing { createGlobalStyle } from 'styled-components' but that didn't seem to work, probably because my implementation was all trial and error guessing
"""const GlobalStyle = createGlobalStyle
body {
margin: 0
}
i then wrapped the above component around my app, and all it did was make the contents of my app disappear like whiteout :-(
also, github.com/vercel/next.js/tree/mas... offers no explanation on how/where to inject global css
The solution to this problem is using the updated version of the
pages/_document.jsfile.github.com/vercel/next.js/blob/mas...
Well one major issue is you shouldn't wrap your app with the GlobalStyle component.
This is a common mistake actually, but you'll notice that GlobalStyle isnt a react component and it does not take children as a prop so anything inside won't be rendered.
Instead you need to render it as a self closing tag
<GlobalStyle />