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.
App.js
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.
App.js
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/