'Remove margin from body in React

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>
javascriptcssreactjs


Solution 1:[1]

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;
}

Solution 2:[2]

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";

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 amcquaid
Solution 2 Uladz Kha
Solution 3 Irrelefant

Related Questions