4 
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 组件

4

4 回答 4

12

设置margin: 0;为 body 以消除上面的空白。

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

像下面

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来防止出现此问题

于 2016-01-11T09:32:51.597 回答
0

我通过删除 div 的填充空间解决了这个问题

div style ={{padding:'0px,0px,0px,0px'}}

它将删除 APPBar 的所有额外空间。这个对我有用。

于 2017-12-01T04:45:08.687 回答
0

<AppBar position = 'inherit' /> 将位置属性设置为“继承”，以便 AppBar 继承父样式。

于 2021-03-21T09:46:52.780 回答
0

只需将应用栏位置更改为“绝对”<AppBar position="absolute"

以下是其他属性：“绝对”、“固定”、“相对”、“静态”、“粘性”

于 2021-11-22T17:20:53.863 回答