如何将容器Grid中的子Grid显示到下一行保留space并根据文本换行grid？

Question

组件下方包含一个父网格，其中存在其他 2 个子网格。我试图实现一个硬编码的聊天 UI，我也尝试过使用 sm md 属性，但这放弃了网格根据其中的文本内容进行包装。使用 sm md 属性使网格具有恒定宽度，由于文本长度不断变化，因此可能无法使用文本完全填充。

export const Chats = () => {
  return (
    <>
      <Grid container display={"wrap"} justifyContent={"space-between"}>
        <Grid
          style={{
            backgroundColor: "white",
            padding: "10px",
            marginTop: "100px",
            borderRadius:"10px"
          }}
        >
          <Box>
            <Typography>This is message 1 </Typography>
          </Box>
        </Grid>
        <Grid
          style={{
            backgroundColor: "#E3F6CB",
            padding: "10px",
            marginTop: "100px",
            borderRadius:"10px"

          }}
        >
          <Typography>This is message 2</Typography>
        </Grid>
      
      </Grid>
    </>
  );
};

Answer 1

您可以使用如下所示的样式 CSS 属性“display:inline-flex”来确保动态文本内容被 Grid 包裹。确保为每个正在创建的聊天框使用多个网格容器。确保使用 material UI 中的预定义属性，如下所示。


export const Chats = () => {
  return (
    <>
      <Grid container xs={12} style={{ display: "inline-flex" }}>
        <Grid item xs={6}>
          <Box
            style={{
              backgroundColor: "white",
              padding: "10px",
              marginTop: "100px",
              borderRadius: "10px",
              display: "inline-flex",
            }}
          >
           This is message 1
          </Box>
        </Grid>
        <Grid item xs={6}></Grid>
      </Grid>
      <Grid container  justifyContent={"space-between"}>
        <Grid item ></Grid>

        <Grid  item >
          <Box
            style={{
              backgroundColor: "#E3F6CB",
              padding: "10px",
              borderRadius: "10px",
              display: "inline-flex",
            }}
          >
           This is message 2
          </Box>
        </Grid>
      </Grid>
    </>
  );
};

如何将容器Grid中的子Grid显示到下一行保留space并根据文本换行grid？

How to display the child Grids inside the container Grid to the next line retaining the space and wrapping the grid according to the text?

grid

reactjs

material-ui