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 :