Material-UI definition list

user_3817502 0
Viewed 4084

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

list with right items

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!

material-design material-ui reactjs
4 Answers

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.

user_123071110

I think the best solution is to use makeStyles and style it to your needs.

import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles((theme) => ({
  definitionList: {
    '& > dt': theme.typography.body1,
    '& > dd': theme.typography.body2,
  },
}));

export const MyComponent: React.FC = observer(() => {
  const classes = useStyles();

Then simply add the class to your dl.

<dl className={classes.definitionList}>

  <dt>Given Name:</dt>
  <dd>{profile.givenName}</dd>

  <dt>Surname:</dt>
  <dd>{profile.surname}</dd>

</dl>
user_8692900
Related