I wanted to do a simple list like this:
1. xxxxx
2. xxxxx
a. xxxxx
b. xxxxx
3. xxxxx
4. xxxxx
a. xxxxx
b. xxxxx
The contents is taken from a react state variable and be mapped to create this list. The state variable structure is not decided upon yet.
If I used css ol & li, it looks straightforward. But when I look at the MUI List, it does not seem to support this. I have to create the numbering 1,2,3 and a,b,c manully.
Is there any MUI components that does a similar job as the css ul & li ?
Thanks.
You can do this by using some CSS properties. First the ListItem
this needs to have a sx={{ display: "list-item" }}
. Then we can add sx={{ listStyle: "decimal" }}
to the List
We also need to add some padding-left
to be able to see the indicator, you can play with this.
<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>
And use listStyle: "lower-alpha"
for a b c
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With