Можно ли разместить html элементов с левой стороны сетки пользовательского интерфейса материала?

Question

Использование пользовательского интерфейса материала для стиля.

Можно ли разместить элемент HTML или элемент Typography слева от сетки, и он все еще будет на одной линии?

Вот небольшой фрагмент кода.

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

Добавить элемент Типография отображается над строкой, где находятся serviceDateOne и serviceDateTwo. Кстати, компонент просто стилизованный div. Элемент включен как часть сетки, и я пытаюсь добиться того, чтобы поместить этот элемент за пределы сетки и слева от формы, действуя как боковые метки для этой строки, и элементы сетки только как часть сетки

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