reactjs - 使用material-ui在同一行上使用2个Typography的后续行

Question

我在让排版进入第二行而不离开第一行时遇到了一些麻烦，例如：

我试图在这里削减不必要的代码：

<Grid item container direction="column" >
{Array.isArray(x.sense) && x.sense && x.sense.map((x, index) => (
    <>
        {Array.isArray(x.gloss) ?
            <Grid item container direction="row">
                <Typography key={index} style={{ color: "#90a4ae", fontSize: "25px", }}>
                    {index + 1 + '. '}

                </Typography>
                <Typography key={index + 1} style={{ color: "#000000", fontSize: "25px", marginLeft: "5px" }}>
                    {x.gloss.toString().replace(/,/g, ', ')}

                </Typography>
            </Grid> : null
        }
    </>
))}

就像他们停留在“检查元素”上一样：

我已经尝试过修改行、列、nowarps、breakwords ..但是短文本它们保持在同一行，有什么线索吗？

更新- 刚刚插入了一个“跨度”，对我来说很好用

<Typography key={index + 1} style={{ color: "#000000", fontSize: "25px", marginLeft: "5px" }}>
         <span style={{ color: "#90a4ae", fontSize: "25px", }}>{index + 1 + '. '}</span>
         {x.gloss.toString().replace(/,/g, ', ')} </Typography>

标签： reactjsmaterial-uitypography

Answer 1

只需包裹Typography在里面<Grid item />

{
  Array.isArray(x.gloss) ? (
    <Grid container direction="row">
      <Grid item>
        <Typography key={index} style={{ color: "#90a4ae", fontSize: "25px" }}>
          {index + 1 + ". "}
        </Typography>
      </Grid>

      <Grid item>
        <Typography
          key={index + 1}
          style={{ color: "#000000", fontSize: "25px", marginLeft: "5px" }}
        >
          {x.gloss.toString().replace(/,/g, ", ")}
        </Typography>
      </Grid>
    </Grid>
  ) : null;
}