React MUI CssBaseline API
Last Updated :
25 Jan, 2023
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/
Share your thoughts in the comments
Please Login to comment...