React MUI ListItemButton 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 ListItemButton API. The Lists are continuous, vertical indexes of Text and Images. ListItemButton is a list item that makes it functional or clickable. It also adds the material splash effect on top of the button. The API provides a lot of functionality and we will learn to implement them.

Import ListItemButton API

import ListItemButton from '@mui/material/ListItemButton';
// or
import { ListItemButton } 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 is used to override the existing styles or add new styles to the component.
• sx( Array<func / object / bool>/ func / object): The system prop allows defining system overrides as well as additional CSS styles. 
• alignItems(center / flex-start): It is used to set the align-items style property. The default value is the center.
• autoFocus(bool): If set to true, the list item is focused when the component is first mounted. The default value is false.
• children(node): This contains the content of the component.
• component(elementType): It is the component used for the root node.
• dense(bool): If set to true,  the items inside the component have less padding and come closer to each other. The default value is false.
• disabled(bool): If set to true, the component is disabled and we won’t be able to click it. The default value is set to false.
• disableGutters(bool): If set to true, the left and right padding inside the component is 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 which acts as a divider between items. The default value is set to false.
• selected(bool): If set to true, applies the selected styling.

CSS Rules:

• root(.MuiListItemButton-root): It is the style applied to the root element.
• 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 true.
• selected(.Mui-selected): It is the state class applied to the root element if selected is set to true.

Syntax: Create ListItemButton in List as follows

<ListItem>
    <ListItemButton>
        ...
    </ListItemButton>
</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 ListItemButton inside the List.

Output:

 

Example 2: In the following example, we have a divider for all the ListItemButtons.

Output:

 

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