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" }}>neveropen</h1> <h2>React MUI GlobalStyles API</h2> </div> <div style={{ width: "50%" }}> <GlobalStyles styles={{ h1: { color: 'green' } }} /> <h1>Welcome to neveropen</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" }}>neveropen</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 neveropen</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/
