Introduction
As a UX designer and front-end developer, I’m always on the lookout for tools and libraries that make my job easier. When I first discovered Material UI, I was impressed by how it simplified UI development and improved the consistency of my designs. In this article, I want to focus specifically on lists in Material UI V5.
Lists are a crucial part of UI design. They help organize information and make it easy for users to scan and find what they’re looking for. In the past, creating lists could be a time-consuming process, requiring a lot of custom CSS and JavaScript. But with Material UI, you can create beautiful, functional, and customizable lists with just a few lines of code.
If you’re not familiar with Material UI, let me give you a brief overview. Material UI is a React component library that follows Google’s Material Design guidelines. Material Design is a design language that emphasizes simplicity, clarity, and consistency across different platforms and devices. Material UI provides a set of pre-built components that you can use in your React apps, such as buttons, forms, cards, and of course, lists.
One of the main benefits of using Material UI is the amount of time it can save you. Instead of coding everything from scratch, you can simply import a component, modify its props, and you’re good to go. This means you can focus more on the design and functionality of your app, rather than the nitty-gritty details of CSS and JavaScript.
So let’s take a closer look at lists in Material UI.
There are three main types of lists in Material UI:
- Simple List
- Dense List
- Padded List
The Simple List and Dense List are similar in appearance, with the latter having a higher density of items. The Padded List has more spacing between the items, making it better for longer lists with more content. All three types are easy to implement and can be customized with different props.
Let’s start with the Simple List. Here’s an example of how to create a basic list with two items in Material UI:
import React from 'react';
import { makeStyles } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
export default function SimpleList() {
const classes = useStyles();
return (
<List className={classes.root}>
<ListItem>
<ListItemText primary="Item 1" />
</ListItem>
<ListItem>
<ListItemText primary="Item 2" />
</ListItem>
</List>
);
}In this example, we import the necessary Material UI components and define a simple list with two items. We also use makeStyles to define the styles for our list. The result is a clean and functional list that follows Material Design guidelines.
Next up is the Dense List. This type of list is better suited for large amounts of data, as it has a higher density of items. Here’s an example of how to create a Dense List in Material UI:
import React from 'react';
import { makeStyles } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import WorkIcon from '@mui/icons-material/Work';
import BeachAccessIcon from '@mui/icons-material/BeachAccess';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
export default function DenseList() {
const classes = useStyles();
return (
<List dense className={classes.root}>
<ListItem>
<ListItemAvatar>
<Avatar>
<WorkIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary="Ali Connors — I'll be in your neighborhood doing errands this…"
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar>
<BeachAccessIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary="to Alex, Scott, Jennifer"
/>
</ListItem>
</List>
);
}In this example, we import additional Material UI components, such as Avatar and Divider, to create a Dense List with more content. As you can see, even with more items and content, the list looks well-organized and easy to read.
Finally, let’s look at the Padded List. This type of list has more spacing between the items, making it better suited for longer lists or lists with more descriptive content. Here’s an example:
import React from 'react';
import { makeStyles } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
export default function PaddedList() {
const classes = useStyles();
return (
<List className={classes.root} subheader={<li />} dense={false}>
{[0, 1, 2, 3, 4, 5].map((value) => {
const labelId = `list-item-${value}-label`;
return (
<ListItem key={value} role={undefined} dense>
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
</ListItem>
);
})}
</List>
);
}In this example, we import the List component with subheader and set the dense prop to false. We also use the map() function to create a list with six items, each with a different label. The result is a visually pleasing list with generous spacing between the items.
As you can see, creating lists in Material UI is quick and easy, and the results are attractive and functional. But what about customizing those lists to fit your specific design needs?
One of the benefits of using Material UI is the high level of customization available. You can tweak pretty much any
aspect of a list, from the spacing between items to the colors and typography used. Let’s take a look at some examples of customizing Material UI lists.
First, let’s customize the background color of our Simple List. Here’s the updated code:
import React from 'react';
import { makeStyles } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: '#e1bee7', // custom background color
},
}));
export default function SimpleList() {
const classes = useStyles();
return (
<List className={classes.root}>
<ListItem>
<ListItemText primary="Item 1" />
</ListItem>
<ListItem>
<ListItemText primary="Item 2" />
</ListItem>
</List>
);
}In this example, we’ve added a custom background color to our Simple List by editing the theme’s background color. You could likewise manipulate the primary and secondary text colors to create a light color scheme and a dark color scheme.
Next, let’s customize the font size and weight of our list items. Here’s the updated code:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
item: {
fontSize: '18px',
fontWeight: 'bold',
},
}));
export default function SimpleList() {
const classes = useStyles();
return (
<List className={classes.root}>
<ListItem>
<ListItemText primary="Item 1" classes={{ primary: classes.item }} />
</ListItem>
<ListItem>
<ListItemText primary="Item 2" classes={{ primary: classes.item }} />
</ListItem>
</List>
);
}In this example, we’ve added a custom class to our list items and used makeStyles to define the font size and weight. We then pass the classes prop to our ListItemText component to apply the custom styles. You can experiment with different typography combinations to achieve the look and feel you desire.
Finally, let’s customize the icon used in our Dense List. Here’s the updated code:
import React from 'react';
import { makeStyles } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import WorkIcon from '@mui/icons-material/Work';
import BeachAccessIcon from '@mui/icons-material/BeachAccess';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
icon: {
color: 'green', // custom icon color
},
}));
export default function DenseList() {
const classes = useStyles();
return (
<List dense className={classes.root}>
<ListItem>
<ListItemAvatar>
<Avatar>
<WorkIcon className={classes.icon} />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary="Ali Connors — I'll be in your neighborhood doing errands this…"
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar>
<BeachAccessIcon className={classes.icon} />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary="to Alex, Scott, Jennifer"
/>
</ListItem>
</List>
);
}In this example, we’ve added a custom class to our icon and used makeStyles to define the color. We then pass this custom class to our WorkIcon and BeachAccessIcon components to apply the custom icon color. You could use this same approach to customize other aspects of the list, such as the background color of the ListItemAvatar.
In conclusion, Material UI is a powerful tool for UI design and development. Lists are a crucial part of UI design, and Material UI provides a variety of pre-built components that make creating and customizing lists easy and efficient. With Material UI, you can create attractive and functional lists in just a few lines of code, saving time and improving the consistency of your designs. So if you haven’t checked out Material UI yet, I highly recommend giving it a try in your next project.
