Material-UI definition list

Question

I'm trying to achieve the following using React Material-UI, minus the expansion carets on the right:

Here's the spec on the Google page. https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage

I've found that there's no exact component for this style. I basically have a bunch of summary data that I want to display but I feel like a Table or just a straight Material List with subheadings is not appropriate. I guess I really want a html definition list basically. Does anyone have any idea how to do this? Just looking for really an idea of how I could do it with the existing material components.

Thanks!

Answer 1

I'm kinda late to the party, but here's how I'll do it:

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

I implemented a similar solution as above. You can switch the containers around to suit your specific need.