Source:  Twitter logo

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.

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;
}
24 users liked answer #0dislike answer #024
Wilson Wu profile pic
Wilson Wu

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 :

23 users liked answer #1dislike answer #123
Yash profile pic
Yash

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;
}
10 users liked answer #2dislike answer #210
Preview profile pic
Preview

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;
5 users liked answer #3dislike answer #35
woss profile pic
woss

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

2 users liked answer #4dislike answer #42
ccnmagnoo profile pic
ccnmagnoo

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

1 users liked answer #5dislike answer #51
Joxad profile pic
Joxad

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

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

0 users liked answer #6dislike answer #60
Francis F Massaquoi Jr profile pic
Francis F Massaquoi Jr

Fix your App bar on top left like this

 <AppBar
          position="static"
          color="inherit"
          style={{ position: 'fixed', top: 0 , left : 0,  margin: 0}}
        >
-1 users liked answer #7dislike answer #7-1
Hitesh Sahu profile pic
Hitesh Sahu

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).