martes 1 octubre 2024

Cómo cambiar style en React

Cambiar el estilo en React

En React, la forma más común de aplicar estilos es a través del atributo style en los componentes. Este atributo acepta un objeto de JavaScript con las propiedades CSS escritas en *camelCase*. También se puede cambiar el estilo de un componente dinámicamente utilizando el estado o pasar estilos a través de *props*.

Métodos principales para cambiar estilos:

1. Estilos en línea: Se definen directamente en el atributo style del componente.

2. Clases CSS: Se aplican utilizando la propiedad className y vinculando archivos CSS.

3. Estilo dinámico: Se modifica en base a variables de estado (state).

4. Bibliotecas de estilo: Utilizan soluciones como styled-components o emotion.

Ejemplos de uso

1. Estilos en línea

function Boton() {
  return (
    <button style={{ backgroundColor: 'blue', color: 'white', padding: '10px 20px' }}>
      Click me
    </button>
  );
}

2. Clases CSS

// Archivo: App.css
.boton-estilo {
  background-color: red;
  color: white;
}

// Archivo: App.js
import './App.css';

function Boton() {
  return <button className="boton-estilo">Click me</button>;
}

3. Estilo dinámico

import React, { useState } from 'react';

function Boton() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      style={{
        backgroundColor: isActive ? 'green' : 'gray',
        color: 'white',
      }}
      onClick={() => setIsActive(!isActive)}
    >
      {isActive ? 'Activo' : 'Inactivo'}
    </button>
  );
}

4. Styled-components

import styled from 'styled-components';

const Boton = styled.button`
  background-color: purple;
  color: white;
  padding: 10px 20px;
  &:hover {
    background-color: violet;
  }
`;

function App() {
  return <Boton>Click me</Boton>;
}

Referencias

Para más detalles sobre estilos en React, consulta la documentación oficial de React.

Etiquetas:

javascript react

Creado por:

Jorge García

Fullstack developer