How to Style and Use Material-UI ListItemText

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!

MUI ListItem and ListItemButton background color
MUI ListItem and ListItemButton background color

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.

MUI ListItemButton, ListItemIcon, and ListItemText
MUI ListItemButton, ListItemIcon, and ListItemText

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.

MUI ListItemText primary and secondary text
MUI ListItemText primary and secondary text

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.

Code Sandbox Link

MUI List Children API

MUI ListItemText API

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.