Los temas son muy esenciales en una aplicación web, ya que proporcionan un tono uniforme en toda la aplicación. Se utiliza para controlar y establecer valores para el color, el fondo, las propiedades de la fuente, los niveles de sombra, la opacidad, etc.
Creación de la aplicación React e instalación del módulo:
-
Paso 1:
npx create-react-app gfg
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd gfg
-
Paso 3: material-ui
npm install @material-ui/core
-
Paso 4: Dirígete a public/index.html y agrega las fuentes a tu <head>:
<link rel="stylesheet" href= "https://fonts.googleapis.com/css2family=Open+Sans:wght@300 &family=Raleway:wght@300&family=Roboto &display=swap">
Ahora, cree un nuevo archivo theme.js en la carpeta src donde definiremos nuestros objetos de tema.
Directorio del proyecto: Se verá así:
Tematización en Material-UI: Material UI proporciona un componente ThemeProvider que se puede usar para inyectar un tema en la aplicación.
La forma en que funciona el tema es que primero definimos un objeto de tema usando createMuiTheme() y luego pasamos este objeto al componente <ThemeProvider> que envuelve toda la plantilla que necesita ser tematizada.
Cuenta a documentos: «<ThemeProvider> se basa en la función de contexto de React para pasar el tema a los componentes», lo que significa que inyecta el tema a todos los componentes de la plantilla. Dado que, de forma predeterminada, cada componente tiene propiedades de estilo configuradas como primarias (por ejemplo, el color de la barra de aplicaciones está configurado como «primario» de manera predeterminada, lo que significa que su color de fondo será cualquiera que sea el valor principal principal del objeto del tema). Entonces, el estilo predeterminado de cada componente ahora se establece a través del tema.
Si es necesario, los colores o estilos de los componentes se pueden anular y cambiar ya sea estableciendo valores explícitamente para cada componente individual o teniendo otro envoltorio <ThemeProvider theme={theme2}> anidado alrededor de la sección requerida de componentes.
Definición de un objeto de tema: la función responsiveFontSizes() nos permite tener tamaños de texto sensibles a la vista.
theme.js
import { createMuiTheme, responsiveFontSizes }
from '@materialui/core/styles';
const theme = responsiveFontSizes(createMuiTheme({
}));
Ahora, seguiremos adelante y cambiaremos algunas variables de configuración de tema predefinidas.
-
Espaciado: ayuda a crear un espacio consistente entre los elementos de nuestra interfaz de usuario.
spacing: 4,
-
Tipografía: Tipografía es donde definimos diferentes variantes de fuente que luego se utilizan en las plantillas de componentes a través del componente ‘Tipografía’.
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', }, }, -
Paleta: Paleta es donde definimos los colores que se utilizarán en nuestra aplicación React. El tema expone los siguientes colores de paleta predefinidos: primario, secundario, error, advertencia, información, éxito y texto para los colores de tipografía.
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', }, },
Ejemplo:
theme.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;
App.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 (
<React.Fragment>
<ThemeProvider theme={theme}>
<CssBaseline />
<Container maxWidth="sm">
<Typography component="h1" variant="h1" align="center"
color="textPrimary" gutterBottom>
Geeks for Geeks
</Typography>
<Typography variant="h2" align="center"
color="textSecondary">
h2 Typography with secondary text colour
</Typography>
<br />
<Typography variant="h3" align="center"
color="textPrimary" paragraph>
h3 Typography variant with primary text colour
</Typography>
<br />
<Button variant="contained"
color="primary" > Primary
</Button>
<Button variant="contained"
color="secondary"> Secondary
</Button>
{/* Since, color prop only takes primary and
secondary as values,we define other colors
in component's style */}
<Button variant="contained"
style={{background:theme.palette.error.main}}>
Error </Button>
<Button variant="contained"
style={{background:theme.palette.warning.main}}>
Warning </Button>
<Button variant="contained"
style={{background:theme.palette.info.main}}>
Info </Button>
<Button variant="contained"
style={{background:theme.palette.success.main}}>
Success </Button>
<br /><br />
</Container>
</ThemeProvider>
</React.Fragment>
);
}
export default App;
Producción:
Referencia:
Publicación traducida automáticamente
Artículo escrito por abhijeetcatches33 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA