材料ui中的排版元素显示在同一行

Question

由于某种原因，我的排版组件在同一行上继续。我一直试图让他们在两条不同的线路上，但没有成功。

<div class="center">
<Typography variant="h1" style={{flexGrow: 1}} gutterBottom>line 1</Typography>
<Typography variant="h6">line 2</Typography>
</div>

第1行和第2行都显示在同一行上。

中心Css：

.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 500px;  }

Answer 1

将flex-direction:column添加到css中。flex的默认行为是包裹子项并使用row作为方向。或者删除整个flex样式，只使用text-align:center

Answer 2

根据MaterialIU排版文档：https://material-ui.com/system/typography/#typography.您可以使用Box组件包装文本：

<Typography component="div" variant="h1">
<Box>
line 1
</Box>
</Typography
<Typography component="div" variant="h6">
<Box >
line 2
</Box>
</Typography>