如何在 reactjs 上删除仪表板 header 周围的空白

Question

如何在 reactjs

上删除仪表板 header 周围的空白区域

任何人都可以帮助第一次做 React 和 css。不确定完成这项工作需要什么。

完整的源代码在这里。 Header.js

import React, { Component, PropTypes } from 'react'

class Header extends Component {
  render() {
    const { todos, actions } = this.props
    return (
      <div style = {divStyle}>
        <h1>
            Dashboard
        </h1>
      </div>
    )
  }
}

var divStyle = {
  background: "black",
  textAlign: "center",
  color: "white"
}

export default Header

App.js

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as TodoActions from '../actions/todos'
import Header from '../components/Header'

class App extends Component {
  render() {
    const { todos, actions } = this.props
    return (
      <div style = {divStyle}>
        <Header/>
      </div>
    )
  }
}

var divStyle = {
  margin: 0,
  padding: 0
}

App.propTypes = {
  todos: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

Answer 1

我不确定你的 React 代码。但这是 CSS 的问题，您没有重置内容。它是由 margin 或 body 或其他原因引起的。使用以下重置。

* {
  margin: 0;
  padding: 0;
}

Answer 2

知道了！

var divStyle = {
  position: "absolute",
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  margin: 0,
  padding: 0
}

如何在 reactjs 上删除仪表板 header 周围的空白

How do I remove the white spaces around my dashboard header on reactjs

javascript

css

reactjs

redux