19

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.

1

9 Answers 9

26

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

1
  • 1
    * { margin: 0; padding: 0; }
    – Daniel
    Jun 2, 2022 at 21:01
26

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

1
10

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;
}
1
  • 2
    Thanks, yeah, but my problem was with the body having a margin. Removing margin from body solved it. Jan 15, 2016 at 19:41
5

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;
1
2

In material-ui 4.11.1 you can change position param from 'static' to 'abolute' material-ui AppBarr API

<AppBar position='absolute' color='primary'>
<Toolbar>{/*code here*/}</Toolbar>
</AppBar>

for now i don´t know how much this will affect the nav bar behavior, but it will solve this anoying by-default feature

1

The trick {{ margin }} did not work for me , so i tried using this css http://meyerweb.com/eric/tools/css/reset/ .

Works perfectly for me

0

Just in case you still need the answer, <AppBar position="absolute"

Below are other properties: "absolute","fixed","relative","static","sticky"

0

If you're using MUI +v5 you can use the disableGutters prop directly:

<Appbar disableGutters />
1
-1

Fix your App bar on top left like this

 <AppBar
          position="static"
          color="inherit"
          style={{ position: 'fixed', top: 0 , left : 0,  margin: 0}}
        >

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.