Material-UI App Bar Comes With A Margin

I used Material-UI 's AppBar component and it works well, but comes with a margin, anyone got a workaround. I need to get rid of the margin.

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;
}