Сложный макет с использованием React и CSS Grid

Question

Так что я пытаюсь создать выше.Есть ли умный способ сделать компонент меню?Или элемент контейнера должен покрывать большую часть компонента контента (он должен быть прямоугольником и сам по себе использовать CSS-сетку для позиционирования левой части и верхней части меню)?

Answer 1

Это не совсем соответствует вашему единственному требованию к форме буквы «L», но должно приблизить вас к тому, что вы были раньше.

Несколько замечаний, о которых стоит упомянуть:

1. Этопросто отвечает на ваш вопрос как вопрос html / css, а не в стиле React.Вы можете разделить это на два компонента, как вы надеялись, используя каждый элемент html / css, отличный от body-content, а затем иметь body-content html / css в качестве дочернего элемента
2. Не совсем точно, как вы хотитеобрабатывать ваш контент, но с этим кодом App-Header будет прокручивать ваш контент.Если вы хотите, чтобы он был исправлен и оставался над содержимым, скопируйте css MainMenu, но задайте стиль для вертикальной прокрутки.

Надеюсь, это заставит вас двигаться в правильном направлении.

body {
  margin: 0px;
}

.App-header {
  background-color: #203764;
  height: 80px;
  padding: 10px;
  color: white;
}

/* Style page content */
.main-content {
    margin-left: 160px; /* Same as the width of the MainMenu */
}

.body-content {
  padding: 20px;
}


/* The MainMenu menu */
.MainMenu {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    color: #FFF;
}

<div class="App">
  <div class="MainMenu">Main Menu</div>
  <div class="main-content">
    <header class="App-header">Header</header>
    <div class="body-content">Content</div>
  </div>
</div>