The Material-UI ListItemText subcomponent is perhaps the most commonly used child component in an MUI List. We’ll take a look at styling and using ListItemText props, and also how to use the component with the ListItemIcon component.
Finally we’ll add a link to a ListItem and also show how to handle click events.
First, however, we need to understand Lists and how they work. The usual MUI structure is as follows:
<List>
<ListItem>
//...sibling list item components
</ListItem>
//More ListItems...
</List>We have a List that wraps one to many ListItem components. Each ListItem usually contains several sibling components. Sometimes these components are wrapped in a ListItemButton to make them all clickable.
The screenshot below shows the List with two items that we will create. Notice how the background color doesn’t fill the same space for each ListItem. Be careful which component you style!
A Code Sandbox with a live example is in the Resources section.
Using Material-UI ListItemIcon with ListItemText
The ListItemIcon is used as a sibling component to ListItemText. It can go on either side and will wrap an MUI Icon component like MailIcon seen below.
<List sx={{ maxWidth: 300 }} aria-label="people-list">
<ListItem sx={{ backgroundColor: "rgb(210,248,255)" }}>
<ListItemButton
component="a"
href="https://smartdevpreneur.com"
target="_blank"
>
<ListItemIcon sx={{ color: "green" }}>
<MailIcon />
</ListItemIcon>
<ListItemText
sx={{ border: "1px solid rgba(200,200,200)" }}
primary="Person A"
secondary="testing"
/>
</ListItemButton>
</ListItem>
</List>Take a look at the screenshot below. You can see how the different styling is accomplished using MuiListItemIcon-root and MuiListItemText-root.
The ListItemIcon can be styled using the sx prop. You’ll notice I set color, which treats the icon like it is text and changes the icon color. Background color can be set the same way.
If you have multiple ListItems, and if some have an indent due to an icon while others don’t, you can use the inset prop to add padding-left as needed. In my testing it added 56px of padding.
Material-UI ListItem onClick
Adding a click handler to a ListItem can be accomplished using the onClick prop.
const handleClick = (event: React.MouseEvent<HTMLElement>, text: string) => {
console.log(event.target);
};
//In the return statement
<ListItem onClick={(e) => handleClick(e, "test")}>In this case, I passed an additional string value simply to demonstrate how to do so.
Notice the TypeScript typing on the MouseEvent that was passed. This is the same as the typing for a ‘regular’ MUI Button component click event.
If desired, a click handler could be added to a ListItemText or ListItemIcon component. However, be aware that this would require the user to precisely click on one of these child components instead of clicking anywhere on the ListItem.
Material-UI ListItemText Styling and Props
Like most MUI components, the ListItemText component can be styling using the sx prop. This allows us to pass in any CSS styling.
ListItemText can display primary and secondary text. These are passed in using props named primary and secondary, respectively. Prop for each of these also exists: primaryTypographyProps and secondaryTypographyProps.
These each accept an object which are passed in as props to the two typography components that are rendered for primary and secondary text. Therefore, if you need to style either text snippet you can simply pass the sx prop to either typography prop.
Take a look at the example below:
<ListItemText
inset
primary="Person B"
sx={{ color: "blue" }} //only at root level, doesn't affect secondary
secondaryTypographyProps={{ sx: { color: "green" } }}
secondary="testing"
>
abctest {/*abctest doesn't render */}
</ListItemText>Interestingly, the top-level sx prop can also style the primary text but it won’t style the secondary. There’s no clear reason for this, but I expect it reflects internal selectors in the MUI library. Notice that the primary text renders with a span element while the secondary renders with a p element.
However, if the disableTypography is set to true, the primary and secondary values will simply render as text inside the root div of the ListItemText component.
A final note: the child text I passed to the ListItemText component does not render. The API docs actually mention that the primary prop and the children prop have the same functionality for the ListItemText component.
How to Add a Link to Material-UI ListItemButton
If you have a ListItemButton and you want it to act like a link when clicked, make sure you add both an href value and set the button to render as an anchor element. See the code below.
<ListItemButton
component="a"
href="https://smartdevpreneur.com"
>If you don’t set component=”a” then it will render as a button element with an href value, which doesn’t actually navigate when clicked.
Resources
Here’s how to add filtering and more to the MUI List component. Also consider using Dividers in your lists.
