AppBar does not fill the top of the screen

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)

[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">

[leedstyh]

Try adding margin:0px to body