React MUI ListItemText API

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI ListItemText API. The Lists are continuous, vertical indexes of Text and Images. ListItem is a single item that contains the individual content. The ListItemText allows to place text in the ListItem. The API provides a lot of functionality and we will learn to implement them.

Import ListItemText API

import ListItemText from '@mui/material/ListItemText';
// or
import { ListItemText } from '@mui/material';

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

• children(node): It is the content of the component.
• classes(object): It overrides the existing styles or adds new styles to the component.
• disableTypography(bool): If set to true, the children won’t be wrapped by a Typography component. The default value is false.
• inset(bool): If set true, the children are indented. If there is neither a left avatar nor a left icon, use this. The default value is false.
• primary(node): It is the main content element.
• primaryTypographyProps(object): These supporting materials will be sent to the secondary typography section.
• secondary(node): It is the second content element.
• secondaryTypographyProps(object): These props will be forwarded to the secondary typography component.
• sx (Array<func/object/bool> func/object): The system prop allows defining system overrides as well as additional CSS styles.

CSS Rules:

• root(.MuiListItemText-root): It is the style applied to the root element.
• multiline(.MuiListItemText-multiline): It is the style applied to the Typography component if primary and secondary are set.
• dense(.MuiListItemText-dense): It is the style applied to the component element if dense.
• inset(.MuiListItemText-inset): It is the style applied to the root element if the inset is set to true.
• primary(.MuiListItemText-primary): It is the style applied to the primary Typography component.
• secondary(.MuiListItemText-secondary): It is the style applied to the secondary Typography component.

Syntax: Create ListItemText in List as follows.

<ListItem divider>
    <ListItemText primary="Javascript" />
</ListItem>

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have ListItemText inside the List.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import { ListItemIcon } from "@mui/material";
import { Css, Html, Javascript, Php } from "@mui/icons-material";

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ListItemText API</strong>
            </div>
            <br />
            <center>
                <Box sx={{ width: "100%", maxWidth: 360,
                           bgcolor: "background.paper" }}>
                    <nav>
                        <List>
                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText
                                        primary="HTML" />
                                </ListItemButton>
                            </ListItem>
                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText
                                        primary="CSS" />
                                </ListItemButton>
                            </ListItem>

                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText
                                        primary="Javascript" />
                                </ListItemButton>
                            </ListItem>
                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText
                                        primary="PHP" />
                                </ListItemButton>
                            </ListItem>
                        </List>
                    </nav>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have set the inset of the ListItemText to true.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import { ListItemIcon } from "@mui/material";
import { Css, Html, Javascript, Php } from "@mui/icons-material";

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ListItemText API</strong>
            </div>
            <br />
            <center>
                <Box sx={{ width: "100%", maxWidth: 360,
                           bgcolor: "background.paper" }}>
                    <nav>
                        <List>
                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText inset
                                        primary="HTML (inset)" />
                                </ListItemButton>
                            </ListItem>
                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText primary="CSS" />
                                </ListItemButton>
                            </ListItem>

                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText inset
                                        primary="Javascript (inset)" />
                                </ListItemButton>
                            </ListItem>
                            <ListItem divider>
                                <ListItemButton>
                                    <ListItemText primary="PHP" />
                                </ListItemButton>
                            </ListItem>
                        </List>
                    </nav>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/list-item-text/