我有点迟到了，但我会这么做：

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

我实现了一个与上面类似的解决方案。您可以根据您的具体需要切换容器。

使用react material ui的Paper组件怎么样？
http://www.material-ui.com/#/components/paper
将数据填充为一行，每行都启用了底部边框css。

<Paper>
  <div style={{borderTop: '1px solid #dce0e0'>
   // fill in each data as a column of a specified width
  </div>
</Paper>

看看这个小提琴。这是一个有点混乱，但你会得到的要点。
https://jsfiddle.net/cmaL8jku/

有一个material-ui组件Card，可以使用。它具有相同的扩展/折叠功能。
这样使用：

<Card>

    <CardHeader
        title="Without Avatar"
        subtitle="Subtitle"
        actAsExpander={true}
        showExpandableButton={true}
    />

    <CardActions>
        <FlatButton label="Action1" />
        <FlatButton label="Action2" />
    </CardActions>

    <CardText expandable={true}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
        Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
        Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
    </CardText>

</Card>

将内容放入CartText中，定义标题。有bool变量actAsExpander，showExpandableButton，可以控制展开/折叠功能。卡片的所有元素都是选项，这意味着如果你不希望卡片动作被删除，其他元素也是如此。
查看DOC以了解卡的更多详细信息。

我认为最好的解决方案是使用makeStyles并根据您的需求设计样式。

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

然后简单地将类添加到你的dl中。

<dl className={classes.definitionList}>

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

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

</dl>

我使用Paper作为容器样式，Stack用于每个项目，Divider用于分隔线。

const DefinitionItem = ({ label, children }: {
  label: React.ReactNode;
  children: React.ReactNode;
}) => (
  <Stack direction="row" width="100%" p={2} gap={2}>
    <Typography component="dt" variant="body1" sx={{ flexGrow: 1 }}>
      {label}
    </Typography>
    <Typography component="dd" variant="body1">
      {children}
    </Typography>
  </Stack>
);

const DefinitionList = ({ children }: { children: React.ReactNode }) => (
  <Paper>
    <Stack component="dl" divider={<Divider />}>
      {children}
    </Stack>
  </Paper>
);

可通过以下方式使用：

<DefinitionList>
  <DefinitionItem label="Trip Name">Caribbean Cruise</DefinitionItem>
  <DefinitionItem label="Location">Barbados</DefinitionItem>
  <DefinitionItem label="Start and end dates">
    <Stack direction="row" spacing={6}>
      <>Start Date: Today</>
      <>End Date: Tomorrow</>
    </Stack>
  </DefinitionItem>
</DefinitionList>