unwilling-turquoise•2y ago

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

dependent-tan•2y ago

Hey @Jams, You can import Material UI List component with MuiList name.

unwilling-turquoise•2y ago

Great! it works.. Thanks @salihozdemir