Usando API con estilo en ReactJS

Los componentes con estilo en ReactJS son una biblioteca CSS-in-JS que se puede usar para un mejor diseño de interfaz de usuario. Esta API nos permite crear un componente con estilo y aplicar todas las propiedades de estilo. Para usar API con estilo en React, necesitamos instalar componentes con estilo.

requisitos previos:

• Fundamentos de ReactJS
• Aplicación ReactJS ya creada

Pasos para usar componentes con estilo en ReactJS:

Paso 1: antes de continuar, primero debemos instalar el componente con estilo, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta src o también puede ejecutar este comando en la terminal de Visual Studio Code en su proyecto carpeta.

npm install --save styled-components

Paso 2: después de instalar los módulos, abra su archivo App.js que se encuentra dentro del directorio de su proyecto, en la carpeta src .

Paso 3: ahora importa React y módulos con estilo.

Paso 4: en su archivo App.js, agregue este fragmento de código para importar React y módulos con estilo.

import React from 'react';
import styled from 'styled-components';

A continuación se muestra un programa de muestra para ilustrar el uso de componentes con estilo:

Ejemplo 1: Cambiar el color de fondo del botón a verde.

Aplicación.js:

import React from 'react';
  
// Importing styled from styled-components
import styled from 'styled-components';
  
// Importing the background-color of your 
// choice to the button using css
// Button component that will render an <a> 
// tag with some styles using styled.
const Button = styled.a`
  background-color:green;
  color: white;
  padding: 1rem 2rem;
  margin-top:100px;
  width: 150px;
  display: block;
`
const App = () => {
  return (
    <center><Button>GeeksforGeeks</Button></center>
  )
}
  
export default App;

Producción:

Ejemplo 2 : agregar un borde al botón.

Aplicación.js:

import React from 'react';
  
// Importing styled from styled components
import styled from 'styled-components';
  
// Importing the background-color of your 
// choice to the button using css
// Button component that will render an <a>
// tag with some styles using styled.
const Button = styled.a`
  background-color:green;
  color: white;
  padding: 1rem 2rem;
  margin-top:100px;
  width: 150px;
  display: block;
  border:8px solid black;
`
const App = () => {
  return (
    <center><Button>GeeksforGeeks</Button></center>
  )
}
  
export default App;

Producción:

Por lo tanto, siguiendo los pasos mencionados anteriormente, podemos usar los componentes con estilo para importar y cambiar el estilo de los componentes en React .