React MUI主题

Material-UI 是一个用户界面库，提供了预定义和可定制的React组件，用于更快速和简便的Web开发。这些Material-UI组件是基于Google的Material Design的。在本文中，让我们讨论一下Material-UI库中的主题。

在React MUI中， 主题 指定组件的颜色、表面的深度、阴影的级别、墨水元素的适当透明度等。主题允许我们向React应用程序应用一致的色调，并定制项目的所有设计方面。

语法：

const theme = createTheme({
      status: {
        danger: orange[500],
      },
});

创建React应用程序和所需模块：

步骤1： 在终端中创建一个名为theming-example的文件夹。在终端中运行代码。

npx create-react-app

步骤2： 在src文件夹内创建一个名为component的文件夹。在component文件夹内创建一个名为Main.js的文件。

cd src
mkdir component
touch Main.js

步骤3： 再次，在同一文件夹中，打开命令提示符并输入以下命令

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

项目结构： 安装完成后，您将拥有所有所需的模块。您的文件夹结构应如下所示。

导入主题组件：

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

示例1： 在这个示例中，我们将看到如何使用 ‘createTheme()’ 函数从 ‘@mui/material/styles’ 包中创建自定义主题，并将其应用于Typography。

• App.js

import React from 'react'; 
import Main from './component/Main'; 
import { createTheme, ThemeProvider }  
    from '@mui/material/styles'; 
      
const theme = createTheme({ 
    palette: { 
        primary: { 
            main: '#228B22', 
        }, 
        secondary: { 
            main: '#f50057', 
        }, 
    }, 
    typography: { 
        fontFamily: 'Arial', 
        fontSize: 16, 
        fontWeight: 'bold', 
    }, 
}); 
function App() { 
    return ( 
        <ThemeProvider theme={theme}> 
            <Main /> 
        </ThemeProvider> 
    ); 
} 
export default App;

• Main.js

import React from "react"; 
import Typography from '@mui/material/Typography'; 
function Main() { 
    return ( 
        <Typography variant="h3" color="primary"> 
            Welcome to GeeksforGeeks! 
        </Typography> 
    ); 
}; 
export default Main;

输出：

示例2： 在这个示例中，我们将学习如何使用 ‘createTheme()’ 函数从 ‘@mui/material/styles’ 包中创建一个自定义主题，并将其应用于一个按钮。

• App.js

import React from 'react'; 
import { createTheme, ThemeProvider } from '@mui/material'; 
import { ThemeProvider as EmotionThemeProvider }  
    from '@emotion/react'; 
import Main from './component/Main'; 
const theme = createTheme({ 
    palette: { 
        primary: { 
            main: '#ff0000', 
        }, 
    }, 
}); 
function App() { 
    return ( 
        <ThemeProvider theme={theme}> 
            <EmotionThemeProvider theme={theme}> 
                <Main /> 
            </EmotionThemeProvider> 
        </ThemeProvider> 
    ); 
}; 
export default App;

• Main.js

import React from "react"; 
import { Button } from "@mui/material"; 
function Main() { 
    return ( 
        <Button variant="contained" color="primary"> 
            Click me! 
        </Button> 
    ); 
}; 
export default Main;

输出：