React MUI ListItem 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 ListItem API. The Lists are continuous, vertical indexes of Text and Images. ListItem is a single item that contains the individual content. The API provides a lot of functionality and we will learn to implement them.

Import ListItem API

import ListItem from '@mui/material/ListItem';
// or
import { ListItem } 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.

• classes (object): This overrides the existing styles or adds new styles to the component.
• alignItems (center / flex-start): It states the align-items style property. The default value is center.
• autoFocus (bool): If set to true, the list item is focused during the first mount. The default value is false.
• children (node): The content of the component.
• component (elementType): It is the component used for the root node.
• components (elementType): It is the components used for each slot inside the InputBase. Either a string to use an HTML element or a component. The default value is an empty array.
• componentsProps (object): It is the props used for each slot inside the Input. The default value is an empty array.
• dense (bool): If set to true, compact vertical padding designed for keyboard and mouse input is used. The default value is false.
• disabled (bool): If set to true, the component is disabled. The default value is set to false.
• disableGutters (bool): If set to true, the left and right padding are removed. The default value is set to false.
• disablePadding (bool): If set to true, all the paddings are removed. The default value is set to false.
• divider (bool): If set to true, a 1px light border is added to the bottom of the list item. The default value is set to false.
• secondaryAction (node): It is the element to be displayed at the end of the list.
• selected (bool): If set to true, applies selected styling. The default value is set to false.
• sx(  Array<func / object / bool>/ func / object): The system prop allows defining system overrides as well as additional CSS sty les. 
• button (bool): If true, the list item is a button. Props intended for ButtonBase can then be applied to ListItem. The default value is set to false.

CSS Rules:

• root (.MuiListItemButton-root): It is the style applied to the root element.
• container (.MuiListItem-container): It is the style applied to the container element if children includes ListItemSecondaryAction.
• focusVisible (.Mui-focusVisible): It is the state class applied to the `component`’s focusVisibleClassName prop.
• dense (.MuiListItemButton-dense): It is the style applied to the component element if dense.
• alignItemsFlexStart (.MuiListItemButton-alignItemsFlexStart): It is the style applied to the component element if alignItems is set to flex-start.
• disabled (.Mui-disabled): It is the state class applied to the inner `component` element if disabled is set to true.
• divider (.MuiListItemButton-divider): It is the style applied to the inner `component` element if the divider is set to true.
• gutters (.MuiListItemButton-gutters): It is the style applied to the inner `component` element unless disableGutters is set to true.
• padding (.MuiListItem-padding): It is the style applied to the root element unless disablePadding is set to true.
• button (.MuiListItem-button): It is the style applied to the inner component element if the button is set to true.
• secondaryAction (.MuiListItem-secondaryAction): It is the style applied to the component element if children includes ListItemSecondaryAction.
• selected (.Mui-selected): It is the state class applied to the root element if selected is set to true.

Syntax: Create ListItem in List as follows.

ListItem>   
    <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 ListItem 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";
function App() {
    return (
     <div className="App">
       <div
        className="head"
        style={{
        width: "fit-content",
         margin: "auto",
         }}
       >
        <h1
         style={{
          color: "green",
          }}
        >
         GeeksforGeeks
        </h1>
        <strong>React MUI ListItem API</strong>
       </div>
       <br />
       <center>
        <Box sx={{ width: "100%", maxWidth: 360,
         bgcolor: "background.paper" }}>
        <nav aria-label="main mailbox folders">
         <List>
          <ListItem>
           <ListItemButton>
            <ListItemText primary="HTML" />
           </ListItemButton>
          </ListItem>
          <ListItem>
           <ListItemButton>
            <ListItemText primary="CSS" />
           </ListItemButton>
          </ListItem>
          <ListItem>
           <ListItemButton>
            <ListItemText primary="Javascript" />
           </ListItemButton>
          </ListItem>
          <ListItem>
           <ListItemButton>
            <ListItemText primary="PHP" />
           </ListItemButton>
          </ListItem>
         </List>
        </nav>
       </Box>
      </center>
     </div>
   );
}

export default App;

Output:

Example 2: In the following example, we have a divider in between the ListItem components.

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";
function App() {
    return (
     <div className="App">
      <div
       className="head"
       style={{
        width: "fit-content",
        margin: "auto",
       }}
      >
       <h1
        style={{
         color: "green",
         }}
       >
        GeeksforGeeks
       </h1>
       <strong>React MUI ListItem 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:

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