如何将主题添加到您的 React 应用程序？

主题在 Web 应用程序中非常重要，因为它们在整个应用程序中提供了一致的基调。它用于控制和设置颜色、背景、字体属性、阴影级别、不透明度等的值。

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

• 第 1 步：使用以下命令创建一个 React 应用程序。

  npx create-react-app gfg

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

  cd gfg

• 第 3 步：创建 ReactJS 应用程序后，使用以下命令安装material-ui模块。

  npm install @material-ui/core

• 第 4 步：前往 public/index.html 并将字体添加到您的 中：

现在，在 src 文件夹中创建一个新文件 theme.js，我们将在其中定义我们的主题对象。

项目目录：它看起来像这样：

Material-UI 中的主题化： Material UI 提供了一个 ThemeProvider 组件，可用于将主题注入应用程序。

主题的工作方式是我们首先使用 createMuiTheme() 定义一个主题对象，然后将该对象传递给包装需要主题的整个模板的 组件。

会计。 to docs – “ 依赖 React 的上下文特性将主题传递给组件”，这意味着它将主题注入模板中的所有组件。因为默认情况下每个组件都将样式属性设置为主要（例如，应用栏颜色默认设置为“主要”，这意味着它的背景颜色将是主题对象的主要值）。所以现在每个组件的默认样式都是通过主题设置的。

如果需要，可以通过为每个组件显式设置值或通过在组件的所需部分周围使用另一个嵌套的 包装器来覆盖和更改组件颜色或样式。

定义主题对象： responsiveFontSizes()函数使我们能够拥有视口响应的文本大小。

theme.js

import { createMuiTheme, responsiveFontSizes } 
  
from '@materialui/core/styles';
  
const theme = responsiveFontSizes(createMuiTheme({
  
}));

现在，我们将继续更改一些预定义的主题配置变量。

• 间距：它有助于在我们的 UI 元素之间创建一致的间距。

  spacing: 4,

• 排版：排版是我们定义不同字体变体的地方，然后通过“排版”组件在组件模板中使用这些变体。

  typography: {
      fontFamily: [
        'Roboto',
        'Raleway',
        'Open Sans',
      ].join(','),
      h1: {
        fontSize: '5rem',
        fontFamily: 'Raleway',
      },
      h2: {
        fontSize: '3.5rem',
        fontFamily: 'Open Sans',
        fontStyle: 'bold',
      },
      h3: {
        fontSize: '2.5rem',
        fontFamily: 'Roboto',
      },
    },

• 调色板：调色板是我们定义要在我们的 React 应用程序中使用的颜色的地方。该主题公开了以下预定义的调色板颜色——主要、次要、错误、警告、信息、成功和用于排版颜色的文本。

  palette: {
      background: {
        default: '#009900',
      },
      primary: {
        main: '#2B37D4',
      },
      secondary: {
        main: '#E769A6',
      },
      error: {
        main: '#D72A2A',
      },
      warning: {
        main: '#FC7B09',
      },
      info: {
        main: '#6B7D6A',
      },
      success: {
        main: '#09FE00',
      },
      text: {
        primary: '#000000',
        secondary: '#FFFFFF',
      },
    },

例子：

主题.js

import { createMuiTheme, responsiveFontSizes } 
from '@material-ui/core/styles';
  
const theme = responsiveFontSizes(createMuiTheme({
  spacing: 4,
  typography: {
    fontFamily: [
      'Roboto',
      'Raleway',
      'Open Sans',
    ].join(','),
    h1: {
      fontSize: '5rem',
      fontFamily: 'Raleway',
    },
    h2: {
      fontSize: '3.5rem',
      fontFamily: 'Open Sans',
      fontStyle: 'bold',
    },
    h3: {
      fontSize: '2.5rem',
      fontFamily: 'Roboto',
    },
  },
  palette: {
    background: {
      default: '#009900'//green
    },
    primary: {
      main: '#2B37D4',//indigo
    },
    secondary: {
      main: '#E769A6',//pink
    },
    error: {
      main: '#D72A2A',//red
    },
    warning: {
      main: '#FC7B09',//orange
    },
    info: {
      main: '#6B7D6A',//gray
    },
    success: {
      main: '#09FE00',//green
    },
    text: {
      primary: '#000000',//black
      secondary: '#FFFFFF',//white
    },
  },
}));
  
  
export default theme;

应用程序.js

import React, { Component } from 'react';
import './App.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/styles';
import theme from './theme';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
  
function App() {
  return (
    
      
  
        
        
          
            Geeks for Geeks
          
          
            h2 Typography with secondary text colour
          
          

          
            h3 Typography variant with primary text colour
          
          

           Primary 
          
           Secondary
          
          {/* Since, color prop only takes primary and 
          secondary as values,we define other colors 
          in component's style */}
          
          Error 
          
          Warning 
          
          Info 
          
          Success 
  
          


        
  
      
    
  
  );
}
  
export default App;

输出：

参考：

• https://material-ui.com/customization/typography/
• https://material-ui.com/customization/palette/