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%,但它不会发生,并且在其顶部、左侧和右上角显示一个奇怪的空白区域:
我的组件的样式有什么问题?
我正在使用很棒的材质用户界面 http://www.material-ui.com/的 React.js 组件
Set margin: 0;
到正文以消除上面的空白。
这个问题是浏览器造成的。每个浏览器都有自己的默认用户代理样式表,您可以在开发工具中看到它。
像下面这样
body - User Agent Stylesheet
display: block;
margin-top: 8px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
没有任何更多详细信息可以解释您的问题,例如父项中的任何样式 (#stupid-app
)?
您还可以通过使用来防止出现此问题重置.css http://meyerweb.com/eric/tools/css/reset/ or 标准化.css https://necolas.github.io/normalize.css/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)