React MUI CssBaseline API

React MUI是一个UI库，提供了完全加载的组件，为我们的生产就绪组件提供了自己的设计系统。MUI是一个用户界面库，提供了预定义和可自定义的React组件，用于更快、更简单的Web开发，这些Material-UI组件是基于谷歌的Material Design。

在本文中，我们将讨论React MUI CssBaseline API。CssBaseline组件是一组HTML元素和属性样式的归一化集合，它可以启动一个优雅、一致和简单的基线构建。

导入CssBaseline API：

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

道具列表：

children： 用于表示卡片的内容。
enableColorScheme： 启用 color-scheme CSS 属性来使用 theme.palette.mode.

创建 React 项目：

步骤 1： 要创建一个 React 应用程序，请通过 npm 命令安装 React 模块。

npm create-react-app project name

步骤2： 创建React项目后，进入文件夹执行不同的操作。

cd project name

步骤3： 在创建ReactJS应用程序之后，使用以下命令安装所需的模块：

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

项目结构：

React MUI CssBaseline API

运行应用的步骤： 打开终端并输入以下命令。

npm start

示例1： 以下示例演示了React MUI CssBaseline API。

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;

输出：

React MUI CssBaseline API

示例2： 下面的示例演示了React MUI CssBaseline API。

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;