应用栏材料 UI 问题

Question

我对材质UI库很陌生，但到目前为止我真的很喜欢它！但是，我在AppBar组件覆盖我的其他内容时遇到问题。我目前在我的应用程序.js渲染方法中有<AppBar />和<myComponent />。以下是代码片段：

render(){
return (
<div>
<AppBar />
<myComponent />
</div>
);
}

这是 myComponent 函数的代码：

function myComponent(){
return (
<h1>
Hello
</h1>
);
}

但是，当我运行此代码时，"Hello"消息被 AppBar 组件覆盖。有没有办法让我的问候消息(和相应的代码(显示在应用栏下？这是一个简单的问题，但我很想弄清楚这一点！

Answer 1

您需要将上边距从顶部添加到应用栏正下方创建的组件

如果您需要代码，我正在从移动设备上发布此内容，请告诉我我会为您纠正它

Answer 2

您可以将paddingTop添加到包含div以补偿AppBar的高度(默认为 64px(：

render() {
return (
<div style={{ paddingTop: 64 }}>
<AppBar>
<Toolbar>
<Typography variant="title" color="inherit">
Title
</Typography>
</Toolbar>
</AppBar>
<YourComponent />
</div>
);
}

Answer 3

使用 appbar 的position: "sticky"道具为我做了一个技巧：

render(){
return (
<div>
<AppBar sx={{position: "sticky"}}/>
<myComponent />
</div>
);
}