css - How to make an AppBar Component fill all div's width and 10% of its height?

Question

class MyStupidComponent extends React.Component {
    render() {
        return (
            <div style={{width: "100%"}}>
                <div style={{height: "10%"}}>
                    <AppBar title="MY APP" />
                </div>
            </div>
        );
    }
}

ReactDOM.render(<MyStupidComponent />, document.getElementById("stupid-app"));

Trying the jsx above AppBar component should fill all width and 10% of height from its div parent but it doesn't happen and it is shown a weird blank space on its top, left and right corner:

What is wrong with my component's style?

I am using the awesome Material UI's React.js Components