React MUI GlobalStyles 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 GlobalStyles API. The GlobalStyles is used to add global baseline styles for some of the HTML elements. The GlobalStyles also add these global styles as overrides for this component If you are using the CssBaseline component for adding the baseline styles.

Import GlobalStyles API:

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

Props list:

• styles: It allows us to add the styles we want to apply globally. Its types include, func | number | object | { __emotion_styles: any } | string | bool.

Creating React Project:

Step 1: To create a react app, install react modules through 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 GlobalStyles API.

Javascript

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

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

export default App;

Output:

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

Javascript

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

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI GlobalStyles API</h2>
            </div>
            <div style={{ width: "50%" }}>
                <GlobalStyles
                    styles={{
                        h1: { color: "green" },
                        p: { color: "gray" },
                        button: { backgroundColor: "green", padding: 20 },
                        a: { textDecoration: "none", color: "white" },
                    }}
                />
                <h1>Welcome to GeeksforGeeks</h1>
                <p>
                    Find articles related to programming,
                    data structures, algorithms,
                    etc.
                </p>
                <button>
                    <a href="geeksforgeeks.org">Visit</a>
                </button>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/global-styles/