如何让 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% 的高度，但它并没有发生，并且在其顶部显示了一个奇怪的空白 space，左右角：

我的组件样式有什么问题？

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

Answer 1

将margin: 0;设置为正文，以去除上面的白色space。

此问题是由浏览器引起的。每个浏览器都有自己的默认用户代理样式表，您可以在 dev-tooling.

中看到它

喜欢下面

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

没有任何更多细节来解释您的问题，例如父级 (#stupid-app) 中的任何样式？

您也可以使用 reset.css or normalize.css

来防止出现此问题

Answer 2

我通过删除 div

的填充 space 解决了这个问题

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

它将移除所有多余的space APPBar。对我有用。

Answer 3

<AppBar position = 'inherit' /> 将 position prop 设置为 'inherit' 以便 AppBar 继承父样式。

Answer 4

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

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

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

How to make an AppBar Component fill all div's width and 10% of its height?

css

reactjs

material-ui