Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>

like image 391
Irrelefant Avatar asked Mar 03 '20 13:03

Irrelefant


3 Answers

You should use global with jsx style

<div>
    <style jsx global>{`
      body {
        margin: 0px;
        padding: 0px;
      }
    `}</style>
  </div>
like image 111
san Avatar answered Oct 02 '22 12:10

san


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;
}
like image 25
amcquaid Avatar answered Oct 02 '22 10:10

amcquaid


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";
like image 27
Uladz Kha Avatar answered Oct 02 '22 10:10

Uladz Kha