Remove margin from body in React

user_10761203 0
Viewed 10948

I'm new to React and currently in the process of building a website, however I cannot get rid of the margin of the body. My css in inside the index.js component and looks like this:

<style jsx>{`
  body {
    margin: 0px;
    padding: 0px;
  }
`}</style>
reactjs css javascript
4 Answers

Where is your root defined? If it's within the body, you won't have access to the body element. Add it to your css or as an in-line style in your index.html.

Inline index.html

<body style="margin: 0px; padding: 0px;">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;
}
user_59685110

You should use global with jsx style

<div>
    <style jsx global>{`
      body {
        margin: 0px;
        padding: 0px;
      }
    `}</style>
  </div>
user_75609600

You can simply create a global.css if not already added with css style:

html,
body {
  paddding: 0;
  margin: 0;
}

and import this styles inside _app.jsx:

import "./global.css";
user_13062710

Thanks for your answer, but I just figured it out. The problem is that I'm using Next.js, which means I don't really have a body tag since it't provided by the "pages" feature from Next. The solution for me was to add the "global" attribute to the jsx which gives me the required access.
Just like this:

   <style jsx global>{`
         body{
             margin: 0px;
             padding: 0px;
         }
        `}</style>
user_107612030
Related