Ad

How Do I Remove The White Spaces Around My Dashboard Header On Reactjs

- 1 answer

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

Anyone can help first time doing react and css. not sure what is need to make this work.

The full source code is here. 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)

enter image description here

Ad

Answer

Got it!

var divStyle = {
  position: "absolute",
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  margin: 0,
  padding: 0
}
Ad
source: stackoverflow.com
Ad