reactjs - Material-UI 定义列表

Question

我正在尝试使用 React Material-UI 实现以下目标，减去右侧的扩展插入符:

这是 Google 页面上的规范。 https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage

我发现这种风格没有确切的组件。我基本上有一堆要显示的摘要数据，但我觉得表格或带有副标题的直接 Material 列表是不合适的。我想我真的想要一个 html 定义列表。有谁知道如何做到这一点？只是想真正了解如何使用现有的 Material 组件来做到这一点。

谢谢!

Answer 1

我参加聚会有点晚了，但我会这样做:

<Grid 
  container
  component='dl' // mount a Definition List
  spacing={2}>
  <Grid item>
    <Typography component='dt' variant='h6'> 
      Some Heading or Definition Term
    </Typography>
    <Typography component='dd' variant='body2'>
      Some Definition data
    </Typography>
  </Grid>
</Grid>

我实现了与上面类似的解决方案。您可以切换容器以满足您的特定需求。