How can I use the Material UI List component without using the Refine List component
When I want to use the <List> component of material ui, I'm getting stuck on where it import it, as whenever I import it from "@pankod/refine-mui", it uses the props that is intended for the <List> for refine. Appreciate your help on this. Thanks!
import { List } from "@pankod/refine-mui";
<List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
<ListItem>
<ListItemAvatar>
<Avatar>
<ImageIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<WorkIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<BeachAccessIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
https://refine.dev/docs/api-reference/mui/components/basic-views/list/
https://mui.com/material-ui/react-list/List | refine
`` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like a create button or giving the page titles.
React List component - Material UI
Lists are continuous, vertical indexes of text or images.
2 Replies
vicious-gold•2y ago
Hey @Jams,
You can import Material UI List component with
MuiList name.fair-rose•2y ago
Great! it works.. Thanks @salihozdemir