Sometimes, we want to style text inside the ListItemText component with React Material UI.

In this article, we’ll look at how to style text inside the ListItemText component with React Material UI.

How to style text inside the ListItemText component with React Material UI?

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

For instance, we write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <div>
      <List dense>
        <ListItem>
          <ListItemText
            primary={
              <Typography variant="h1" style={{ color: "green" }}>
                hello world
              </Typography>
            }
          />
        </ListItem>
      </List>
    </div>
  );
}

We set the primary prop of the ListItemText component to the Typography component to let us custom the text styles.

We set the variant prop to the tag name of the element we want to render.

And we set the style prop to the styles we want for the text.

As a result, we should see a h1 element rendered with the text being ‘hello world’ and the text is green.

Conclusion

To style text inside the ListItemText component with React Material UI, we can use the Typography component.