React MUI ListSubheader API

MUI or 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 ListSubheader API. The ListSubheader helps to add a subheader to the list of items.

Import ListSubheader  API:

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

ListSubheader Props:

• children: It represents the content of the component.
• classes: it helps to override styles applied to the component.
• component:  The component used for the root node. Either a string to use an HTML element or a component.
• color: It sets the color of the component.
• disableGutters: It is a boolean value. It determines whether the List Subheader should have gutters or not. It is false by default.
• disableSticky: It is a boolean value. It determines whether the List Subheader should stick on the top or not. It is false by default.
• inset: It is a boolean value. It determines whether the List Subheader should be indented or not. It is false by default.
• sx: A superset of CSS that packages all of the style functions. 

CSS Rules:

• root(.MuiListSubheader-root): The style applied to the root element.
• colorPrimary(.MuiListSubheader-colorPrimary): The style applied to the root element if color=”primary”.
• colorInherit(.MuiListSubheader-colorInherit): The style applied to the root element if color=”inherit”.
• gutters(.MuiListSubheader-gutters): The style applied to the inner `component` element unless disableGutters={true}.
• inset(.MuiListSubheader-inset): The style applied to the root element if inset={true}.
• sticky(.MuiListSubheader-sticky): The style applied to the root element unless disableSticky={true}.

Syntax:

<ListSubheader></ListSubheader>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

Project Structure: It will look like the following.

Example 1: We are creating a list of countries with subheaders.

App.js

Javascript

import { ListItem, ListSubheader, List } from "@mui/material";

export default function App() {

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI ListSubheader API</h4>
            <b>Countries List:</b>
            <List>
                <ListSubheader>A</ListSubheader>
                <ListItem>Afghanistan</ListItem>
                <ListItem>Albania</ListItem>
                <ListSubheader>B</ListSubheader>
                <ListItem>Brazil</ListItem>
                <ListItem> Bangladesh</ListItem>
            </List>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Example 2: In this example, we are making the above list scrollable. To the first ListSubheader, we are passing the inset prop and to the second component we are adding color=’primary’.

App.js

Javascript

import { ListItem, ListSubheader, List } from "@mui/material";

export default function App() {

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI ListSubheader API</h4>
            <b>Countries List:</b>

            <List
                sx={{
                    width: '100%',
                    maxWidth: 300,
                    overflow: 'auto',
                    maxHeight: 200,

                }}>
                <ListSubheader inset>A</ListSubheader>
                <ListItem>Afghanistan</ListItem>
                <ListItem>Albania</ListItem>
                <ListSubheader color='primary'>B</ListSubheader>
                <ListItem>Brazil</ListItem>
                <ListItem> Bangladesh</ListItem>
            </List>
        </div>


    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

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