reactjs - 是否可以将 html 元素放在材质 UI 网格的左侧？

Question

使用材质 UI 进行样式设置。

是否可以将 HTML 元素或 Typography 元素放置在 Grid 的左侧并且仍然在同一行上？

这是代码的一小段。

  return (
    <Wrapper>
      <form>
        <Grid container spacing={1}>
          <Grid item xsn={8}>
            <SideLabel>{labels.dates}</SideLabel>
          </Grid>
          <Grid item xsn={22}>
            <DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
          </Grid>
          <Grid item xsn={23}>
            <DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
          </Grid>
          <Grid item xsn={47} />
        </Grid>
      </form>
    </Wrapper>
  );

例如，我想添加一个排版元素并将其显示在与网格项目 serviceDateOne 和 serviceDateTwo 相同的行上，那会是什么样子？我试过了

  return (
    <Wrapper>
      <form>
      <Typography>TEST</Typography>
        <Grid container spacing={1}>
          <Grid item xsn={8}>
            <SideLabel>{labels.dates}</SideLabel>
          </Grid>
          <Grid item xsn={22}>
            <DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
          </Grid>
          <Grid item xsn={23}>
            <DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
          </Grid>
          <Grid item xsn={47} />
        </Grid>
      </form>
    </Wrapper>
  );

添加 Typography 元素显示在 serviceDateOne 和 serviceDateTwo 所在行的上方。顺便说一句，该组件只是一个样式化的 div。该元素作为网格的一部分包含在内，我想要实现的是将该元素放置在网格之外和表单的左侧，就像该行的侧标签一样，并且只有网格项作为一部分网格的

标签： reactjsgridmaterial-ui

Answer 1

网格用于分隔，所以只需在顶层进行分隔。

  return (
    <>
      <Grid container spacing={1}>
        <Grid item xs={3} style={{ backgroundColor: "lightgray" }}>
          <Typography>TEST</Typography>
        </Grid>
        <Grid item xs={9}>
          XXX
          <Grid container spacing={1}>
            <Grid item xs={12}>
              YYY
            </Grid>
            <Grid item xs={6}>
              ZZ
            </Grid>
            <Grid item xs={6}>
              ZZ
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </>
  );

更新

在一行中显示两个孩子：ref QA

  return (
    <div style={{ display: "flex" }}>
      <Typography style={{ backgroundColor: "lightgray", width: 100 }}>
        TEST
      </Typography>
      <Grid container spacing={1} style={{ backgroundColor: "gray" }}>
        <Grid item xs={12}>