React MUI CssBaseline API

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 CssBaseline API. A CssBaseline component is a collection of HTML element and attribute style normalizations that allows kickstarting an elegant, consistent, and simple baseline to build upon.

Import CssBaseline API:

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

Props list:

• children: It is used to denote the content of the card.
• enableColorScheme: It enables the color-scheme CSS property to use the theme.palette.mode.

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 CssBaseline API.

Javascript

import React from "react";
import CssBaseline from '@mui/material/CssBaseline';

function App() {

    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI CssBaseline API</h2>
            </div>
            <div style={{ width: "50%" }}>
                <CssBaseline>
                    <h1 style={{ color: 'green' }}>
                        Welcome to GeeksforGeeks
                    </h1>
                </CssBaseline>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI CssBaseline API.

Javascript

import React from "react";
import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI CssBaseline API</h2>
            </div>
            <div style={{ width: "50%" }}>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <ScopedCssBaseline>
                    <p>
                        Welcome to the largest community of Geeks!
                    </p>
                </ScopedCssBaseline>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/css-baseline/