Skip to content
Related Articles
Open in App
Not now

Related Articles

React MUI Display

Improve Article
Save Article
  • Last Updated : 13 Oct, 2022
Improve Article
Save Article

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Display API in the Material-UI library.

MUI Display: The Display API provided by MUI allows us to control the visibility of the DOM elements on a need basis.

MUI Display props:

Import NamePropCSS PropertyTheme Key
displayPrintdisplayPrintdisplaynone
displayRawdisplaydisplaynone
overflowoverflowoverflownone
textOverflowtextOverflowtext-overflownone
visibilityvisibilityvisibilitynone
whitespacewhitespacewhite-spacenone

 

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

Project Structure:  It will look like the following.

 

Example 1: In this example, we will try to create a simple application that 2 DOM elements, one having display style as inline, and the other as block.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

App.js




import * as React from 'react';
import Box from '@mui/material/Box';
  
export default function BasicButtonGroup() {
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI display API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    margin: "auto",
                }}
            >
                <Box sx={{ width: '100%', height: 100 }}>
                    <Box
                        component="div"
                        sx={{
                            display: 'inline',
                            p: 1,
                            m: 1,
                            bgcolor: '#101010',
                            color: 'grey.300',
                            border: '1px solid',
                        }}>inline</Box>
                    <Box
                        component="div"
                        sx={{
                            display: 'block',
                            p: 1,
                            m: 1,
                            bgcolor: '#101010',
                            color: 'grey.300',
                            border: '1px solid',
                        }}>block</Box>
                </Box>
            </div>
        </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, let’s change the visibility of a DOM element depending on the screen size. On small screen sizes, let’s show the DOM element, and on bigger screen sizes, let’s hide the element. Change your App.js like the one below.

App.js




import * as React from 'react';
import Box from '@mui/material/Box';
  
export default function BasicButtonGroup() {
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI display API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Box sx={{ width: '100%', height: 100 }}>
                    <Box
                        component="div"
                        sx={{
                            display: { xs: 'block', sm: 'none' },
                            p: 1,
                            m: 1,
                            bgcolor: '#101010',
                            color: 'grey.300',
                            border: '1px solid',
                        }}>block</Box>
                </Box>
            </div>
        </div>
    );
}

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

npm start

Output:

 

Reference: https://mui.com/system/display/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!