Cómo establecer el color de fondo en ReactJS

Como desarrollador web, es probable que te encuentres en la situación de querer establecer un color de fondo para un componente en particular en tu aplicación ReactJS. Hay varias maneras de lograrlo y en este artículo vamos a explorar algunos métodos comunes.

Usando estilos inline

Una de las formas más simples de establecer el color de fondo de un componente es mediante el uso de estilos inline. Para hacer esto, simplemente debes especificar el atributo style en tu componente con un objeto que incluya la propiedad backgroundColor.

import React from "react";

const ComponenteEjemplo = () => (
  <div style={{ backgroundColor: "#00bcd4" }}>
    Contenido del componente
  </div>
);

export default ComponenteEjemplo;

En el ejemplo anterior, hemos establecido el color de fondo en el componente ComponenteEjemplo utilizando un estilo inline con el color #00bcd4.

Usando clases CSS

Otro método para establecer el color de fondo de un componente es mediante el uso de clases CSS. Para hacer esto, debes crear una clase CSS que especifique la propiedad background-color y luego aplicar esa clase al componente en cuestión.

.mi-clase-background {
  background-color: #00bcd4;
}

import React from "react";
import "./estilos.css";

const ComponenteEjemplo = () => (
  <div className="mi-clase-background">
    Contenido del componente
  </div>
);

export default ComponenteEjemplo;

En este ejemplo, hemos creado una clase CSS llamada mi-clase-background que establece el color de fondo en #00bcd4. Luego, en nuestro componente ComponenteEjemplo, hemos aplicado esta clase usando el atributo className.

Usando estilos en línea con styled-components

Si estás utilizando el paquete styled-components en tu aplicación ReactJS, puedes establecer el color de fondo de un componente de una manera más elegante y mantenible utilizando estilos en línea.

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

const Contenedor = styled.div`
  background-color: #00bcd4;
`;

const ComponenteEjemplo = () => (
  <Contenedor>
    Contenido del componente
  </Contenedor>
);

export default Componente

Para tutoriales sobre react puedes visitar este blog con artículos sobre react