React MUI Container Layout

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Container layout. A container is the most basic layout element and a building block that centers the content horizontally.

Container Layout Variants:

• Fluid: A fluid container width is bounded by the maxWidth prop value.
• Fixed: If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed prop. The max-width matches the min-width of the current breakpoint.
• API: The API used in container layout is: <Container />

Syntax:

<Container>
    ...
</Container>

Creating React Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

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

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

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI Fluid container layout.

Javascript

import * as React from "react";
import Container from "@mui/material/Container";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Container Layout</h2>
            </div>
            <div>
                <Container maxWidth="md">
                    <div
                        style={{
                            backgroundColor: "lightgreen",
                            height: "30em",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <h1>Fluid Layout with <span
                            style={{ color: 'green' }}>"md"</span>
                                as maxWidth</h1>
                    </div>
                </Container>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI Fixed container layout.

Javascript

import * as React from "react";
import Container from "@mui/material/Container";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Container Layout</h2>
            </div>
            <div>
                <Container fixed>
                    <div
                        style={{
                            backgroundColor: "green",
                            height: "30em",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <h1 style={{ color: 'white' }}>Fixed Layout</h1>
                    </div>
                </Container>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-container/