Как правильно разместить основной контент вокруг панелей приложений и ящиков в Material-UI?

Question

Я использую материал-интерфейс для многих приложений React.Я использую отзывчивый ящик + панель приложений для проекта, и я не понимаю, как лучше расположить контент вокруг этих навигационных элементов.Вы просто берете свой основной контент и ставите большой верх и левые поля?Есть ли лучший способ сделать что-то подобное?

На моей сетке теперь у меня есть:

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

Answer 1

Посмотрите на пример Dashboard в Примеры макетов страницы ( код ).Это очень хороший пример, и он должен помочь вам найти макет для вашего приложения.

Что касается высоты AppBar, подход интересен.Вместо указания статического верхнего поля или отступа, они вставляют div, который имеет такой же высокий рост, как AppBar (так как его высота является адаптивной и будет отличаться для различных областей просмотра):

<div className={classes.appBarSpacer} />

Класс appBarSpacer определен в таблице стилей и использует mixin панели инструментов, который экспортирует точное поведение реагирования, которое используется в Toolbar (и, соответственно, AppBar):

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

Эффект заключается в том, что над основным контентом всегда будет достаточно места, чтобы протолкнуть его под AppBar.