Question

我正在使用material-ui Appbar并将其修复到我的主要组件中具有高z-index的React应用程序的顶部。但是，我所有的儿童组件都使用display-flex。我希望避免任何儿童被应用栏阻挡。我尝试为我所有的儿童组件Div设置一个margin-top，但由于app栏根据方向和屏幕大小调整大小，我可以设置固定的margin-top。有解决方案吗？

Answer 1

你的问题似乎没有反应，至少在这个时间点 id说它与CSS有关。

如果我理解你有类似的东西

<body>
<div class="fixed-to-top"></div>
<div class="react-root"></div>
</body>

为什么不设置您的appbar以获得以下内容：

.fixed-to-top{
   position:relative; 
   top:0;
}

body {
 display: flex;
 flex-flow: column;
 justify-content:flex-start;
}

并将上述css添加到您的css中，以便您的appbar始终位于最前端，但不会隐藏下面的其他元素

让我知道这是否有意义

Answer 2

the docs中介绍了几种解决方案。其中之一是在应用栏后立即呈现一个空的工具栏：

<AppBar position="fixed">
    <Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />

如何在Appbar下为子组件设置相对margin-top？

2 个答案: