Reaccionar apoyos de 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. El puntal es un componente importante que se requiere en cada desarrollo.

Los accesorios se utilizan para establecer restricciones de diseño, lo que garantiza un fácil acceso a los diseños. También ayuda a hacer diseños receptivos. Hay muchos accesorios que se pueden usar y todos tienen diferentes propósitos y formas de usarlos.

Sintaxis:

<Component Prop='HelloProp'></Component>

Lista de accesorios disponibles: A continuación se muestra la lista de accesorios disponibles en React Rebass.

• Rebass sx Prop
• Rebass como utilería
• Accesorio de colores Rebass
• Margen de rebass y apoyo de relleno
• Apoyo de tipografía Rebass
• Accesorio de diseño de rebass
• Accesorio Flexbox Rebass

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

Estructura del proyecto: Tendrá el siguiente aspecto.

Rebass sx Prop: El sx Prop se usa para agregar estilo al componente. acepta un objeto de estilo que tiene el estilo que se utilizará para el componente.

Sintaxis:

<component sx={{ style }}></component>

Ejemplo: En este ejemplo, estamos usando el accesorio sx para agregar estilo a los botones.

import React from "react";
import { Button } 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>
      <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>
  );
};
  
export default gfg;

Producción:

Rebass as Prop: as Prop se utiliza para representar el elemento HTML proporcionado. toma el elemento HTML como su parámetro.

Sintaxis:

<component as='element'></component>

Ejemplo: en este ejemplo, estamos usando como prop para representar el botón como etiqueta de anclaje.

import React from "react";
import { Button } 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>
      <Button
        as='a'
        href="https://www.geeksforgeeks.org/"
        color="white"
        bg="green"
        mr={3}
        ml="40%">
        LogIn
      </Button>
      <Button 
        as='a'
        href="https://www.geeksforgeeks.org/"
        color="white"
        bg="blue" mr={3}
        variant='outline'>
        LogOut
      </Button>
      <Button
        as='a'
        href="https://www.geeksforgeeks.org/" 
        color="white"
        bg="red"
        disabled="false">
        Subscribe
      </Button>
    </div>
  );
};
  
export default gfg;

Producción:

Rebass Colors Props: Los colores se utilizan para agregar colores en Props. toma valor de string como parámetro para establecerse como colores.

Sintaxis:

<component Color='string' ></component>

Ejemplo: En este ejemplo, estamos usando la propiedad de color para dar color al elemento de texto.

import React from "react";
  import { Text } from "rebass";
  
const gfg = () => {
  return (
    <div id="gfg">
      <Text
        fontSize={[3, 4, 5]}
        fontWeight='bold'
        color='green'
        ml="42%">
        Geeksforgeeks
      </Text>
      <br/>
      <center>
      <Text
        color="blue">
        DSA
      </Text>
      <Text
        color="yellow">
        Coding
      </Text>
      <Text
        color="red">
        Web Development
      </Text>
      </center>
    </div>
  );
};
  
export default gfg;

Producción:

Rebass Margin y padding Props: Margin y padding se utilizan para agregar Margin y padding en Props. toma el valor del objeto numérico como parámetro a configurar. los valores disponibles son:-

• m : margen
• mt : margen superior
• mr : margen derecho
• mb : margen inferior
• ml : margen izquierdo
• mx : margen izquierdo y margen derecho
• my : margen superior y margen inferior
• pag : relleno
• pt : parte superior acolchada
• pr : relleno derecho
• pb : fondo acolchado
• pl : relleno-izquierda
• px : relleno-izquierda y relleno-derecha
• py : relleno-superior y relleno-inferior

Sintaxis:

<component margin_prop ={number}></component>

Ejemplo: En este ejemplo, estamos agregando margen y accesorios de relleno a los elementos.

import React from "react";
import { Text } from "rebass";
  
const gfg = () => {
  return (
    <div id="gfg">
      <Text
        fontSize={[3, 4, 5]}
        fontWeight='bold'
        color='green'
        ml="42%">
        Geeksforgeeks
      </Text>
    </div>
  );
};
  
export default gfg;

Producción:

Rebass Typography Props: La tipografía se usa para dar estilo al texto en Props. los valores disponibles son:-

• tamaño de fuente
• Familia tipográfica
• fuentePeso
• altura de la línea
• espaciado de letras
• texto alineado
• Estilo de fuente

Sintaxis:

<component typographic_prop = 'value' ></component>

Ejemplo: En este ejemplo, estamos agregando tipografía al componente de enlace.

import React from "react";
import { Link } from "rebass";
  
const gfg = () => {
  return (
    <div id="gfg">
      <center>
      <Link
        fontFamily='cursive'
        fontSize={[5,5,]}
        href='https://www.geeksforgeeks.org/'>
        Geeksforgeeks
      </Link>
      </center>
    </div>
  );
};
  
export default gfg;

Producción:

Accesorios de diseño de Rebass: el diseño se utiliza para cambiar el ancho, la altura, la visualización y otros valores en cualquier elemento. los valores disponibles son:-

• ancho
• minAncho
• anchura máxima
• altura
• minAltura
• Altura máxima
• monitor
• tamaño (ancho y alto)
• alineación vertical
• Desbordamiento

Sintaxis:

<component layout_value = 'value' ></component>

Ejemplo: en este ejemplo, estamos agregando diseño al elemento de caja.

import React from "react";
import { Box } from "rebass";
  
const gfg = () => {
  return (
    <div id="gfg">
      <center>
        <br/>
      <Box
        display='grid'
        bg='red'
        width={128}
        height={128} >
        Geeksforgeeks
      </Box>
      </center>
    </div>
  );
};
  
export default gfg;

Producción:

Rebass Flexbox Props: Flexbox se usa para agregar accesorios flexbox en estilos de diseño. los valores disponibles son:-

• alinear elementos
• alinear contenido
• justificar artículos
• justificar el contenido
• envoltura flexible
• flexDirection
• flexionar
• FlexGrow
• flexionar
• base flexible
• justificarse
• alinearse
• ordenar

Sintaxis: 

<component flexbox_value ='value' ></component>

Ejemplo: En este ejemplo, estamos agregando soporte flexible al componente de caja.

import React from "react";
import { Box,Flex } from 'rebass'
  
const gfg = (props) => {
  return (
    <Flex>
    <Box 
    flex='1 1 auto'
    display='inline-block'
    width={200}
    height={200}
    p={5}>
      <h1>GeeksforGeeks</h1>
    </Box>
    </Flex>
  
  );
};
  
export default gfg;

Producción:

Referencia: https://rebassjs.org/props