title: How to make an AppBar Component fill all div's width and 10% of its height?
body: <pre><code>class MyStupidComponent extends React.Component {
      render() {
          return (
              &lt;div style={{width: "100%"}}&gt;
                  &lt;div style={{height: "10%"}}&gt;
                      &lt;AppBar title="MY APP" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(&lt;MyStupidComponent /&gt;, document.getElementById("stupid-app"));
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/34gDq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/34gDq.png" alt="enter image description here"></a></p>
  
  <p>What is wrong with my component's style?</p>
  
  <p>I am using the awesome <a href="http://www.material-ui.com/" rel="nofollow noreferrer">Material UI</a>'s React.js Components</p>