React MUI默认主题

Material UI 是一个UI库，为React提供了预定义的强大且可定制的组件，以便更轻松地进行网页开发。MUI设计基于Google的Material Design。主题意味着在整个网站中使用一致的颜色方案、字体样式、阴影、间距、形状、过渡、尺寸和其他组件样式。这有助于网站产生更好的视觉影响。

Material UI 提供了一个主题对象，负责为组件提供主题。通过进一步创建自己的主题对象，可以进一步定制组件的主题。在本文中，我们将研究主题对象的默认值。

创建React应用程序并安装模块:

步骤1: 使用以下命令创建一个React应用程序:

npx create-react-app foldername

步骤2： 创建您的项目文件夹，例如文件夹名称，然后使用以下命令进入该文件夹：

cd foldername

步骤3: 创建ReactJS应用后，使用以下命令安装所需模块：

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

导入语句：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

项目结构： 将会如下所示。

React MUI默认主题

示例1：

在本示例中，我们通过Button组件显示默认主题。

App.js

import { Button } from "@mui/material"; 
function App() { 
    return ( 
        <div className="App" style={{ textAlign: "center" }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <h3> 
                React MUI Default Theme 
            </h3> 
            <Button color="primary" variant="contained"> 
                primary 
            </Button> 
            <Button color="warning" variant="contained"> 
                warning 
            </Button> 
            <Button color="error" variant="contained"> 
                error 
            </Button> 
        </div> 
    ); 
} 
export default App;

运行应用程序的步骤: 从项目的根目录使用以下命令运行应用程序。

npm start

输出： 现在打开你的浏览器并访问 http://localhost:3000/ ，你将看到以下输出。

React MUI默认主题

示例2： 写下面的代码来添加默认的暗色主题。

App.js

import { Button } from "@mui/material"; 
import { ThemeProvider, createTheme } from '@mui/material/styles'; 
import CssBaseline from '@mui/material/CssBaseline'; 
  
const darkTheme = createTheme({ 
    palette: { 
        mode: 'dark', 
    }, 
}); 
function App() { 
    return ( 
        <ThemeProvider theme={darkTheme}> 
            <CssBaseline /> 
            <div className="App" style={{ textAlign: "center" }}> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h3>React MUI Default Theme</h3> 
                <Button color="primary" variant="contained"> 
                    primary 
                </Button> 
                <Button color="warning" variant="contained"> 
                    warning 
                </Button> 
                <Button color="error" variant="contained"> 
                    error 
                </Button> 
            </div> 
        </ThemeProvider> 
    ); 
} 
  
export default App;

运行应用程序的步骤： 从项目的根目录中使用以下命令来运行应用程序。