在Material-UI中将主要内容放置在应用栏和抽屉周围的正确方法是什么？

Question

我将material-ui用于很多React应用程序。我正在为项目使用响应式抽屉+应用程序栏，但我对如何最好地在这些导航器周围放置内容感到困惑。您是否仅保留主要内容并设置较大的顶部和左侧边距？有没有更好的方法来做这种事情？

现在在我的网格上，我有

const styles = theme => ({
  root: {
    padding: "0 20px",
    marginTop: 80,
    justifyContent: "flex-start",
    marginLeft: 230   
  }
});

Answer 1

看看Dashboard example（Page Layout Examples）中的code。这是一个很好的例子，应该可以帮助您确定应用的布局。

关于AppBar的高度，该方法很有趣。他们不是指定静态的上边距或填充，而是插入div的样式，其样式与AppBar一样高（因为它的高度敏感，并且对于不同的视口会有所不同）：< / p>

<div className={classes.appBarSpacer} />

类appBarSpacer在样式表中定义，并使用工具栏mixin，该工具导出了Toolbar（并扩展为AppBar）中使用的确切响应行为：

const styles = theme => ({
  // ...
  appBarSpacer: theme.mixins.toolbar,
  // ...
});

结果是，主要内容上方始终有足够的空间将其推到AppBar下方。