Material UI - 分层有序列表

Question

我想做一个像这样的简单列表：

1. xxxxx
2. xxxxx
   a. xxxxx
   b. xxxxx
3. xxxxx
4. xxxxx
   a. xxxxx
   b. xxxxx

内容取自反应状态变量并进行映射以创建此列表。状态变量结构尚未确定。

如果我使用 css ol & li，它看起来很简单。但当我查看 MUI List 时，它似乎不支持这一点。我必须手动创建编号 1,2,3 和 a,b,c。

是否有任何 MUI 组件可以完成与 css ul & li 类似的工作？

谢谢。

Answer 1

您可以通过使用一些 CSS 属性来做到这一点。首先，ListItem这需要有一个sx={{ display: "list-item" }}. 然后我们可以添加sx={{ listStyle: "decimal" }}到List

我们还需要添加一些padding-left以便能够看到指示器，您可以使用它。

<List sx={{ listStyle: "decimal", pl: 4 }}>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="A" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="List" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="Item" />
  </ListItem>
</List>

并listStyle: "lower-alpha"用于a b c