CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Rajika Imal
Rajika Imal

Reputation: 655

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.

Upvotes: 21

Views: 39554

Answers (9)

Normal
Normal

Reputation: 3646

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

<Appbar disableGutters />

Upvotes: 0

Francis F Massaquoi Jr
Francis F Massaquoi Jr

Reputation: 131

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

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

Upvotes: 1

ccnmagnoo
ccnmagnoo

Reputation: 31

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

Upvotes: 2

Preview
Preview

Reputation: 35806

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

Upvotes: 11

Yash
Yash

Reputation: 3576

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

Upvotes: 29

Hitesh Sahu
Hitesh Sahu

Reputation: 45072

Fix your App bar on top left like this

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

Upvotes: -1

woss
woss

Reputation: 1003

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;

Upvotes: 5

Wilson Wu
Wilson Wu

Reputation: 2018

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

Upvotes: 27

Joxad
Joxad

Reputation: 69

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

Upvotes: 1

Related Questions