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

【问题标题】：How to make an AppBar Component fill all div's width and 10% of its height?如何让 AppBar 组件填充所有 div 的宽度和 10% 的高度？
【发布时间】：2016-04-15 11:22:23
【问题描述】：

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

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

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

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

如下图

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

没有更多详细信息可以解释您的问题，例如父 (#stupid-app) 中的任何样式？

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需将应用栏位置更改为“绝对”

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

【讨论】：