Material-UI app bar comes with a margin

If you use default React Web template to create the project, you can edit the index.html file in public folder, add below style in body:

<body style="margin: 0">
...
</body>

Or add it in you css file like below:

body {
    margin: 0;
}

You can always specify custom styles on a material-ui component by passing it the style property like so:

<AppBar style={{ margin: 0 }}/>

That will override the default root element style. If the property you're willing to change is on a children component, you'll have to set it using CSS, if there is no specific property material-ui exposes you.

Removing the margin on the body would also fix your problem

body {
  margin: 0;
}

Although you should usually use a CSS reset to avoid getting errors like these by integrating the following CSS snippet:

*, *:after, *:before {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

You can use Css Baseline from Material-ui (https://material-ui-next.com/style/css-baseline/)

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}

export default MyApp;

Just insert CssBaseline tag before any element whose default margins you want to remove. Like

import React, { Component } from 'react';
import Main from "./Components/Main";
import CssBaseline from '@material-ui/core/CssBaseline';
// or
// import { CssBaseline } from '@material-ui/core';

class App extends Component {
  render() {
    return (
      <div className="App">
          <CssBaseline/>
          //Any element below this will not have the default margin
          <Main/>
      </div>
    );
  }
}

export default App;

Result :

enter image description here

Tags:

Javascript

Css

Reactjs

Material Ui

Recent Posts