文章/答案/技术大牛

发布

社区首页 >问答首页 >使用material在同一行上带有2个排版的后续行

问使用material在同一行上带有2个排版的后续行
EN

Stack Overflow用户

提问于 2021-09-08 01:11:42

回答 1查看 1K关注 0票数 0

我有一个小麻烦，让一个排版进入第二行，而不是第一条，例如：

我试图在这里删除不必要的代码：

<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
        }
    </>
))}

在这里，就像他们停留在“检查元素”上：

我已经尝试过修改行，列，现在，breakwords..but与短的文本，他们停留在同一行，有什么线索吗？

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

<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>

material-ui

typography

reactjs

回答 1

Stack Overflow用户

发布于 2021-09-08 01:18:11

只需将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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69095919

复制

相似问题

问使用material在同一行上带有2个排版的后续行
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用material在同一行上带有2个排版的后续行EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用material在同一行上带有2个排版的后续行
EN