如何使AppBar组件填充所有div的宽度和10%的高度？

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"));

尝试使用appBar组件上方的jsx应该从其div父级填充所有宽度和10%的高度,但它不会发生,并且在其顶部,左侧和右上角显示一个奇怪的空白区域:

我的组件风格有什么问题？

我正在使用很棒的Material UI的React.js组件

Answer 1

设置margin: 0;为正文以摆脱上方的空白区域.

此问题是由浏览器引起的.每个浏览器都有自己的默认用户代理样式表,您可以在开发工具中看到它.

如下

body - User Agent Stylesheet
   display: block;
   margin-top: 8px;
   margin-right: 8px;
   margin-bottom: 8px;
   margin-left: 8px;

没有任何更多细节可以解释您的问题,例如parent(#stupid-app)中的任何样式？

您还可以使用reset.css或normalize.css来防止出现此问题