How can I create a bulleted list using Material UI components?

user_17717555 0
Viewed 7568

How can I create a bulleted list using MUI components? I have tried adding sx={{listStyleType:'disc'}} to the List component, but no luck. Here is my code : 

    <List sx={{ listStyleType: 'disc' }}>
      <ListSubheader sx={{
        fontWeight: 700, lineHeight: '24px', fontSize: '16px', color: 'black'
      }}
      >
        Search Help
      </ListSubheader>
      <ListItem>Double check your spelling</ListItem>
      <ListItem>Your search may have been removed or is not yet in the system</ListItem>
    </List>

material-ui
4 Answers

I figured it out, needs to be <ListItem sx={{ display: 'list-item' }}>

user_177175550

None of those worked for me for some reason so i had to use Material UI Icons

<ListItem> <ListItemIcon> < MUIIcon /> </ListItemIcon> <ListItemText primary="" /> </ListItem>

user_56070850

<ListItem style={{ display: 'list-item' }}>

user_106507420

This worked for me:

<List
sx = {{
 listStyleType: 'disc',
 pl: 2,
 '& .MuiListItem-root': {
  display: 'list-item',
 },
}}>
 <ListItem>
 ...
 </ListItem>
</List>

or

<List
sx = {{
 listStyleType: 'disc',
 pl: 2,
}}
</List>
<ListItem
sx = {{
 display: 'list-item',
}}>
 ...
</ListItem>
user_34875790
Related