4

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.

1 Answer 1

13

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.