无法删除React Web App上的边距

时间:2018-06-24 02:03:55

标签: css reactjs react-redux

我无法在我的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

6 个答案:

答案 0 :(得分:0)

使用背景图片时。其问题归因于图像尺寸比。

您必须使用CSS中的background-size:cover属性。

还要使用适当的背景位置,以确保木槌位于页面的底部中央。

答案 1 :(得分:0)

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

尝试

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

答案 2 :(得分:0)

用户代理样式表将覆盖自定义样式。您可以在普通的html和css中使用!important覆盖

最好让用户反应间距库,而不是覆盖用户默认样式表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

反应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'))

答案 3 :(得分:0)

所有浏览器都使用不同的默认边距,这导致网站在其他浏览器中看起来有所不同。

Enter first name: janee Enter last name: denver ['n', 'e', 'e'] *,意味着wildcard存在于我们的网站中(考虑为universal selector),因此我们将网站中的每个元素都设置为< strong>零利润和零填充,以使该网站在每个浏览器中看起来都一样。

如果您的样式未得到应用,则可以使用all elements覆盖样式,

!important

答案 4 :(得分:0)

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

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

阅读文档后,我意识到不是边距,而是图像的定位。将 position:fixed 设置为 top:0left:0 解决了该问题。

答案 5 :(得分:0)

如果您使用 create-react-app 创建它,则可能会有一个文件 public/index.html

在根周围有一个标签,React 将在其中注入您的应用程序。

通常浏览器样式表将 <body> 的边距设置为 8px。 这很可能是您正在努力摆脱的应用程序周围的白边。

要删除它,一种选择是打开 public/index.html 并使用如下内联样式将边距设置为 0:

<body style=margin:0>

如果您使用 @emotion/react 进行样式设置,您也可以(仍然假设 public/index.html 中有这个 body 标签)将其保留为 <body> 并使用 {{3} } 来定义 <body> 的样式。您的 App.js 中的类似内容:

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

export default App;