Extensió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 Rebase. Ampliar es una parte importante que se requiere en cada desarrollo. Los componentes de Rebass están destinados a ser utilizados como bloques de construcción en el desarrollo de un sistema de diseño. Puede crear fácilmente una biblioteca de componentes con una API coherente y estilos guiados por las restricciones de diseño definidas en su tema mediante la ampliación de estos componentes fundamentales.

Los componentes de Rebass se pueden ampliar agregando técnicas de estilo a los componentes de Rebass como:

• Accesorios SX
• Accesorios CSS
• variantes
• Accesorios del sistema de estilo

Sintaxis:

<Component sx={{ 
    //properties 
}}>
</Component>

Vamos a entenderlos en detalle.

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
npm i @rebass/preset

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: En este ejemplo, estamos usando sx prop para extender el componente de caja.

import React from "react";
import { Box } from "rebass";
import { Text } from "rebass";
  
const gfg = () => {
  return (
    <div id="gfg">
      <Text
        fontSize={[3, 4, 5]}
        fontWeight='bold'
        color='green'
        ml="42%">
        Geeksforgeeks
      </Text>
      <Box
        sx={{
          fontSize: 3,
          margin: 20,
          width: 100
        }}
        color="white"
        bg="green"
        mr={3}
        ml="40%"
      >
        Coding
      </Box>
      <Box sx={{
        fontSize: 3,
        margin: 20,
        width: 100
      }} color="white"
        bg="blue" mr={3}
        variant='outline'
        ml="40%">
        Articles
      </Box>
      <Box
        sx={{
          fontSize: 3,
          margin: 20,
          width: 200
        }} color="white"
        bg="red"
        disabled="false"
        ml="40%">
        Web Development
      </Box>
    </div>
  );
};
  
export default gfg;

Producción:

Ejemplo 2: en este ejemplo, estamos usando accesorios predeterminados para extender el componente de caja.

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='green'
                    width={400}
                    height={60}
                    color={"yellow"}
                   >
                    GeeksforGeeks: A Computer Science Portal
                </Box>
            </center>
        </div>
    </ThemeProvider>

Producción:

Referencia: https://rebassjs.org/extending/