logo标签列表

从 React 中移除 body 的边距

javascriptcssreactjs
10

我刚接触React，正在构建一个网站，但是无法去掉body的边距。 我的css在index.js组件中，如下所示：

<style jsx>{`
  body {
    margin: 0px;
    padding: 0px;
  }
`}</style>
我建议在你的应用程序开头添加一个CSS重置，https://meyerweb.com/eric/tools/css/reset/ 这将帮助你更加跨浏览器兼容，并消除许多意外行为。 - Shmili Breuer
5个回答
9

你应该在jsx样式中使用global

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

你的 root 定义在哪里？如果是在 body 内部，你将无法访问到 body 元素。将其添加到你的 css 或 index.html 中作为内联样式。

内联 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;
}
不需要将零尺寸添加“px”。margin: 0和padding: 0即可生效。 - Cris
7
你可以简单地创建一个global.css文件（如果不存在），并使用以下CSS样式：
html,
body {
  padding: 0;
  margin: 0;
}

然后在_app.jsx中导入此文件：

import "./global.css";
0
谢谢你的回答，但我已经解决了。问题在于我正在使用Next.js，这意味着我实际上没有body标签，因为它是由Next的“页面”功能提供的。对我来说，解决方案是将“global”属性添加到jsx中，这样我就可以获得所需的访问权限。
就像这样：
   <style jsx global>{`
         body{
             margin: 0px;
             padding: 0px;
         }
        `}</style>
0
在NEXT.js中设置全局样式的方法如下：
1. 创建一个顶级的`styles`目录和一个`global.css`文件。 2. 在`styles/global.css`文件中添加以下CSS代码。这段代码会重置一些样式并改变`a`标签的颜色：
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
...

最后，在之前创建的pages/_app.js文件中导入CSS文件：
// `pages/_app.js`
import '../styles/global.css';

从docs调整的答案。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接