Material-ui: AppBar does not fill the top of the screen

[karlmarxlopez]

Problem description

The AppBar has small padding on left, right and top. Please check the image included and the code.
And also, I don't have any other CSS imported.

Minimal working code that reproduces the issue

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import tapEventPlugin from 'react-tap-event-plugin';
import AppBar from 'material-ui/AppBar';
import App from './components';
import { blueA200, orange900 } from 'material-ui/styles/colors'
const MLAppBar = (props) => (
    <AppBar
        title="MUI Sandbox"
        style={{backgroundColor: orange900 }}
    >
    </AppBar>
);
tapEventPlugin();
ReactDOM.render(<MuiThemeProvider><MLAppBar/></MuiThemeProvider>, document.getElementById('root'));
registerServiceWorker();

Versions

• Material-UI: 0.18.5
• React: 15.6.1
• Browser: Chrome Version 59.0.3071.115 (Official Build) (64-bit)

[leedstyh]

Try adding margin:0px to body

[karlmarxlopez]

Thank you @leedstyh !

[karlmarxlopez]

Reopened: Although, @leedstyh solution is quick and easy. The bottom scroll bar is visible when I set the body margin to zero. I don't want this to happen.

[kgregory]

I don't believe this is an actual issue with material-ui and would be better served on StackOverflow. If you can demonstrate that this is a failing of this package rather than an implentation issue, please provide the reproduction steps here.

[akshaynaik404]

@humbleBeginner As @kgregory already mentioned, this issue is not related to the AppBar component itself but the default styling of the body tag.

See this StackOverflow Question and close this issue, if your problem is solved.

[m2mathew]

Closing as this is a question better answered on StackOverflow or similar.

[oldo]

If it helps anyone else, I was having this issue and it's because I just copied the little snippet from the docs for AppBar component, including position="static". I removed this (so default fixed position was now used) and the little margin disappeared.

So previously was:

<AppBar position="static" color="default">

And I just changed to

<AppBar color="default">