小编chr*_*6tv的帖子

如何增加 flex 中行的高度（包含的 div 具有“row”类）？我有一行两列。

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

<section class="body2">

  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>

</section>

如何增加该行的高度？我已经尝试过 height:something in .row 但它不起作用

我在材质 ui 中的Tabs 组件中自定义了代码，

  <AppBar position="static">
    <Tabs
      variant="fullWidth"
      value={value}
      onChange={handleChange}
      aria-label="nav tabs example"
    >
      <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
      <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />

    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Page Onee
  </TabPanel>
  <TabPanel value={value} index={1}>
    Page Two
  </TabPanel>

它基本上是两个选项卡，单击其中一个会显示文本“Page Onee”，单击另一个选项卡，则会显示文本“Page Two”。

但是，我希望能够使用反应路由器，以便我可以将一个组件带到每个选项卡并分配路由。在反应路由器中，它会是这样的（我知道反应路由器还有更多的事情要做，但在选项卡代码中就是这样）：

<Link class="nav-link" to="/component1">Click here to see component1</Link>

<Link class="nav-link" to="/component2">Click here to see component2</Link>

但是在我向您展示的第一段代码中（我从材料 ui 中定制的那个）我有这些<TabPanel>标签。

有没有一种简单的方法可以将反应路由器放入其中？

如果不可能包含反应路由器，我如何仍然能够使用该材质 ui 代码呈现我的组件？