Ящик для материала пользовательского интерфейса и панель приложений внутри панели приложений с вкладками

Question

В моем приложении есть вкладки для нескольких файлов, каждый из которых должен иметь свой собственный ящик и панель приложений. Коды и коробка похожи на то, что я пытаюсь сделать.

https://codesandbox.io/s/wyv8m32kk7

Как вы видите, содержимое первой вкладки находится ниже ящика. Как вы можете предотвратить это?

Я попытался добавить левое поле к контенту, как на панели приложений, но это не решило проблему.

Answer 1

Это вызвано position: relative на выдвижном ящике, который взаимодействует с display: block div, в который он обернут.

Для достижения этого эффекта (из-за навигационной панели ниже панели приложения) используйте Z-index и отступ / отступ:

drawerPaper: {
    zIndex: 0,
    paddingTop: 60,
    width: drawerWidth,
  },

Источник: https://github.com/mui-org/material-ui/issues/957