在 React 中使用样式组件和网格操作排版组件？

问题描述

我正在尝试使用 React 中的样式化组件模拟表格。样式包括 <Typography> 组件。使用 Grid，我很难让表格标题与表格数据中的迭代元素对齐。结果应该是这样的：

到目前为止我使用的代码看起来像这样，我没有得到我想要的结果，因为标头没有与迭代数据内联：

相关样式：

const TicketPricingGrid = styled.div`
  display: grid;
  grid-template-columns: 200px 400px 400px;
  grid-template-rows: auto;
  justify-content: flex-start;
  align-items: center;
  padding-top: 152px;
`;

const GridHeader = styled.div`
  div:nth-child(1) {
    padding-left: 100px;
  }
`;

const GridPricing = styled.div`
  justify-content: center;
`;

和相关的 JSX：

<TicketPricingGrid>
        <GridHeader />

        <GridHeader>
          <Typography className="hide-mobile" h3>
            IN-STATE
          </Typography>
        </GridHeader>
        <GridHeader>
          <Typography className="hide-mobile" h3>
            OUT-OF-STATE
          </Typography>
        </GridHeader>

        {[...selectedCity].map((city,idx) => (
          <>
            <GridPricing>
              <Typography h4>
                {city.name} {city.address}
              </Typography>
              <Typography h4>{localDate(city.dateTime,'MM-DD a')}</Typography>
            </GridPricing>
            <GridPricing>
              <TicketPriceInput
                onChange={e => {
                  setPrices(e.target.value,idx);
                  detectInputChange(e);
                }}
                value={prices.length === 0 ? '0' : prices[idx]}
                name="price"
                isPriceChanged={isPriceChanged}
              />
            </GridPricing>
            <GridPricing>
              <OutPriceLabel className="hide-mobile">
                <Typography h2 bold className="hide-mobile">
                  {outLocationPrice(prices[idx])}
                </Typography>
              </OutPriceLabel>
            </GridPricing>
          </>
        ))}
      </TicketPricingGrid>

结果如下：

我只是想了解当有像 .

这样的子组件时实现 Grid 和/或 Flex 的最佳方式。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）