Módulo Reaccionar componentes con estilo

El Módulo de componente con estilo nos permite escribir CSS dentro de JavaScript de una manera muy modular y reutilizable en React. En lugar de tener un archivo CSS global para un proyecto de React, podemos usar un componente con estilo para mejorar la experiencia del desarrollador. También elimina la asignación entre componentes y estilos, utilizando componentes como una construcción de estilo de bajo nivel.

Características principales del componente con estilo:

• Prefijo automático de proveedores
•  Reemplazo de accesorios de estilo de escritura en todas partes.
•  Compatibilidad con consulta de medios (a diferencia de la utilería de estilo).
•  Facil de mantener

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 styled

Nota: si previamente instaló create-react-app globalmente a través de npm, use directamente el siguiente comando. Su entorno de desarrollo está listo. Ahora instalemos componentes con estilo en nuestra aplicación.

Paso 2: después de crear la carpeta de su proyecto, es decir, con estilo, muévase a la misma carpeta:

cd styled

Paso 3: Instalación de componentes con estilo: los componentes con estilo se pueden instalar a través de npm en su aplicación React. Siga los pasos que se indican a continuación para instalar componentes con estilo en su aplicación React. Para instalar los componentes con estilo, use el siguiente comando:

Con npm:

npm install --save styled-components

Con hilo:

yarn add styled-components

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 4: Para agregar componentes con estilo en su aplicación, abra el directorio de su proyecto en el editor que usa.

Y vaya al archivo app.js. Ahora, agregue el código que se indica a continuación en app.js.

import styled from "styled-components"

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. Para usar componentes con estilo, primero creemos un componente en la aplicación de reacción. En el directorio de su proyecto, cree un archivo llamado Button.js dentro de la carpeta src.

import Button from './Button'
  
function App() {
  return (
    <div >
      <Button> Click </Button>
    </div>
  );
}
  
export default App;

Agregue propiedades css básicas en la string de plantilla. Además, en el componente Botón, agregamos un elemento div. (Podemos agregar styled.div o styled.span o su propio React Component )

import styled from 'styled-components'
  
const Button = styled.div`
    width : 100px ;
      cursor: pointer ;
    text-decoration : none;
    color : white ;
    background-color : purple;
    margin : 0 auto ;
    font-size:2rem; 
`
  
export default Button;

Para crear varios botones de diferentes valores de estilo (por ejemplo, diferentes colores), podemos usar este componente de botón de estilo diferente nuevamente o simplemente podemos pasar accesorios. 

Paso 5:

Pasando accesorios

Para hacer que los componentes con estilo sean más dinámicos, podemos pasar accesorios de la misma manera que pasamos accesorios en React Components. 

Aquí en App.js, pasamos un objeto llamado bg con un valor de color.

import Button from './Button'
  
function App() {
  return (
    <div >
      <Button bg="green"> Click </Button>
      <Button bg="yellow"> Click </Button>
    </div>
  );
}
  
export default App;

En Button.js, el valor de background-color pasamos una string de plantilla en la que, al usar un operador ternario, podemos verificar el valor del atributo props.bg y establecer el valor de background-color en consecuencia. Además, si alguna propiedad CSS requiere un prefijo, el componente con estilo lo hace automáticamente. 

background-color : ${props => 
    props.bg === "green" ? "green" : "yellow"};

Botón.js

import styled from 'styled-components'
  
const Button = styled.div`
    height:50px
    width : 100px ;
    cursor: pointer ;
    text-decoration : none;
    color : blue;
    background-color : ${props => props.bg === 
                      "green" ? "green" : "yellow"};
    margin: 0 auto;
    font - size: 3rem;
`
  
export default Button;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: