Tematización React Rebass

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo conoceremos qué son los Props en React Rebass. Los accesorios son un componente importante que se requiere en cada desarrollo. La tematización se utiliza para proporcionar colores, estilos tipográficos, estilos de diseño y variantes de componentes a nuestro proyecto. Podemos personalizar la tematización de los componentes del proyecto muy fácilmente utilizando el proveedor de temas.

ThemeProvider: Tendremos que añadir un componente proveedor de temas a nuestro proyecto para dar la tematización.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

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 foldername

Paso 3: Instale React Rebass y forme componentes en su directorio dado.

npm i rebass

Paso 4: para agregar el componente del proveedor de temas, tendremos que instalar la interfaz de usuario del tema para nuestro proyecto. Para instalar la interfaz de usuario del tema, use la sintaxis que se proporciona a continuación:

npm i theme-ui gatsby-plugin-theme-ui

Paso 5: ahora, para proporcionar temas personalizados, utilizaremos el componente del proveedor de temas.

import { ThemeProvider } from 'theme-ui'

export default props =>
  <ThemeProvider theme={theme}>
     //Content
  </ThemeProvider>

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo 1: para proporcionarlos, usaremos un relleno externo llamado theme.js y exportaremos el objeto del tema desde ese archivo.

import React from 'react'
import theme from './theme'
import { ThemeProvider } from 'theme-ui'
import {  Button , Text} from "rebass";
  
export default props =>
  <ThemeProvider theme={theme}>
    <div id="gfg">
      <Text
        fontSize={[3, 4, 5]}
        fontWeight='bold'
        ml="42%">
        Geeksforgeeks
      </Text>
      <Button
        sx={{
          fontSize: 3,
          margin: 20,
        }}
        color="white"
        bg="green"
        mr={3}
        ml="40%"
      >
        LogIn
      </Button>
      <Button sx={{
        fontSize: 3,
        margin: 20,
      }} color="white"
        bg="blue" mr={3}
        variant='outline'>
        LogOut
      </Button>
      <Button
        sx={{
          fontSize: 3,
          margin: 20,
        }} color="white"
        bg="red"
        disabled="false">
        Subscribe
      </Button>
    </div>
  </ThemeProvider>

export default {
    colors: {
        background: 'black',
        text: 'green',
    },
    buttons: {
        primary: {
            color: 'white',
            bg: 'primary',
        }
    }
}

Producción:

Ejemplo 2: Usando el preajuste predeterminado para dar el tema, para instalar el tema preestablecido use el siguiente comando:

npm i @rebass/preset

Importe el ajuste preestablecido al proyecto.

import preset from '@rebass/preset'

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import preset from '@rebass/preset'
import { Box } from "rebass";
  
export default props =>
    <ThemeProvider theme={preset}>
        <div id="gfg">
            <center>
                <br />
                <Box
                    display='grid'
                    bg='red'
                    width={128}
                    height={128} >
                    Geeksforgeeks
                </Box>
            </center>
        </div>
    </ThemeProvider>

Producción:

Ejemplo 3: En este ejemplo, usaremos la tematización de objetos internos para dar el tema:

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import { Box, Heading } from "rebass";
  
export default props =>
    <ThemeProvider theme={{
        colors: {
            background: 'gray',
            text: 'blue',
        },
        buttons: {
            primary: {
                color: 'white',
                bg: 'primary',
            }
        }
    }}>
        <div id="gfg">
            <center>
                <br />
                <Box
                    display='grid'
                    bg='red'
                    width={200}
                    height={200} >
                    <Heading>
                        GeeksforGeeks
                    </Heading>
                </Box>
            </center>
        </div>
    </ThemeProvider>

Producción:

Referencia: https://rebassjs.org/theming