css 在React中删除主体边缘

ff29svar 于 2023-02-01 发布在 React

关注(0)|答案(4)|浏览(183)

我是React的新手，目前正在建设一个网站，但是我不能摆脱身体的边缘。我的css在index.js组件内，看起来像这样：

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

4条答案

你的root在哪里定义的？如果它在body里面，你将不能访问body元素。把它添加到你的css或者作为index.html的内嵌样式。

内联索引.html

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

中央支助组

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

您应该将global与jsx样式结合使用

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

你可以简单地创建一个css风格的global.css（如果它还不存在）：

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

并将此文件导入_app.jsx：

import "./global.css";

谢谢你的回答，但我刚刚才明白。问题是我使用的是Next.js，这意味着我没有body标签，因为它不是由Next的"pages"特性提供的。对我来说，解决方案是在jsx中添加"global"属性，这给了我所需的访问权限。
就像这样：

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