reactjs 无法删除react Web应用上的边距

z4iuyo4d 于 2023-02-08 发布在 React

关注(0)|答案(9)|浏览(168)

在我的react项目中，我很难去除这些巨大的白色边。下面是我尝试过的一些解决方案。

* { margin: 0; padding: 0; }

/-/-/-/

body {
  max-width: 2040px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both;
}

我已经尝试了每一个变化。我唯一安装的依赖关系，应该会影响任何CSS明智的是 Bootstrap ，我不认为这是它。我试图调整max-width的值2040px只是为了测试它是否会工作，似乎有一个限制，我可以设置宽度。帮助将不胜感激。
我还应该提到的是，这个问题在整个页面中是持续存在的。这个问题不仅限于我在css文件White Margins中链接的背景图像

reactjs

来源：https://stackoverflow.com/questions/51006397/cant-remove-margins-on-react-web-app

9条答案

按热度按时间

bbuxkriu1#

所有的浏览器都使用不同的默认边距，这会导致网站在其他浏览器中看起来不同。
*是wildcard，意味着all elements出现在我们的网站上（考虑为universal selector），所以我们设置我们网站中的每个元素都有零边距和零填充，使网站在每个浏览器上看起来都一样。
如果您的样式没有被应用，那么您可以使用!important来覆盖样式，

* {    
    margin: 0 !important;
    padding: 0 !important;
}

赞(0）回复(0）举报 2023-02-08

n7taea2i2#

如果您使用create-react-app创建它，则可能会有一个文件public/index.html。
React将在根目录中注入应用程序，根目录周围有一个标记。
通常浏览器样式表会将<body>的边距设置为8px，这很可能是你的应用程序周围的白色边距，你很难摆脱它。
要删除它，一个选项是打开public/index.html，并使用如下内联样式将边距设置为0：

<body style=margin:0>

如果你使用@emotion/react来定义样式，你也可以选择（仍然假设public/index.html中有这个body标签）将其保留为<body>，并使用<Global> component来定义<body>的样式。

function App() {
  return (
    <div>
      <Global
        styles={css`
          body {
            margin: 0;
          }
        `}
      />
      <Your />
      <Other />
      <Components />
    </div>
  );
}

export default App;

赞(0）回复(0）举报 2023-02-08

y1aodyip3#

用户代理样式表覆盖了自定义样式。您可以在普通html和css中使用！important覆盖
最好是用户React间距库，而不是覆盖用户默认的样式表https://material-ui.com/system/spacing/
也可以使用以下命令

<body id="body">
<div id="appRoot"></div>
</body>

样式表

body
  margin: 0
  padding: 0
button
  padding: 10px 20px 
  border-radius: 5px
  outline: none

React JS代码块

class A extends React.Component{  
  componentWillMount(){
    document.getElementById('body').className='darktheme'
  }
    componentWillUnmount(){
    document.getElementById('body').className=''
  }
  render(){
    return (
      <div> Component A </div>
    )
  }
}
class App extends React.Component{  
  constructor(){
    super()
    this.state = {
      isAMount: false
    }
  }

  handleClick(){
    this.setState({
      isAMount: !this.state.isAMount
    })
  }

  render(){
    return (
    <div> 
        <button onClick={this.handleClick.bind(this)}> Click Me</button> 
        <div> App </div>
        <hr />
        <div> {this.state.isAMount && <A /> } </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('appRoot'))

赞(0）回复(0）举报 2023-02-08

k75qkfdt4#

如果您尝试：

* {    
margin: 0 !important;
padding: 0 !important;}

你可能会遇到一些问题。因为我使用了一些mui，所以这会扭曲我的组件。我可能会建议修改public/index.html中的“body”，使用：

<body style=margin:0>

赞(0）回复(0）举报 2023-02-08

yx2lnoni5#

当你使用背景图片时，它的问题是由于图片大小的比例.
您必须使用背景大小：css中的cover属性。
也使用适当的背景位置，以确保小木槌在页面底部的中心。

赞(0）回复(0）举报 2023-02-08

k5ifujac6#

我试图在我的react应用程序中添加一个背景图像，但react在顶部和左侧留下了一些空白。

const useStyles = makeStyles((theme) => ({
      background: {
        backgroundImage:  `url(${Image})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width: '100vw',
        height: '95vh',
      }

阅读文档后，我意识到这不是边距，而是图像的定位。用top:0和left:0设置position:fixed修复了这个问题。

赞(0）回复(0）举报 2023-02-08

nfeuvbwi7#

在阅读了上面的答案并尝试了它们之后，我得出结论，最好的方法是保留您的index.css（注意：特别是index.css的边距已经全局设置为0。）以及当您“npx create-react-app”时自动生成的App.css文件。
我已经注意到，许多初学者教程告诉你删除这些文件和更多，但面对这个问题后，老实说，只是编辑样板文件比从头开始更容易。

赞(0）回复(0）举报 2023-02-08

b1payxdu8#

只需添加到app.css或主CSS文件body { margin: 0; padding: 0; }

赞(0）回复(0）举报 2023-02-08

nhjlsmyf9#

* { margin: 0; padding: 0; }被浏览器覆盖。
尝试