Establecer color de fondo con estilos en línea en React

1. Estilos en línea en React
2. Establecer color de fondo con estilo en línea en React
3. Conclusión

La capacidad de aplicar dinámicamente estilos y clases es una de las mejores características de React. Este artículo discutirá cómo configurar estilos en línea para cambiar el color de fondo en React.

Estilos en línea en React

Los estilos en línea le permiten diseñar elementos directamente dentro de JSX, un lenguaje de plantillas de React. Le ayuda a estructurar fácilmente su aplicación React.

Puede aplicar estilos en línea en React, al igual que en HTML. Sin embargo, existen algunas diferencias entre los estilos en línea y los estilos CSS.

JSX se parece mucho a HTML, pero es azúcar de sintaxis para escribir JavaScript. Por esta razón, todas las reglas CSS deben formatearse como un objeto JavaScript.

Los estilos individuales deben escribirse como pares clave-valor en los objetos. Las propiedades CSS que un guión separaría se juntan.

Por ejemplo, la propiedad CSS font-size se convierte en fontSize, y así sucesivamente. Los valores de estas propiedades deben ser cadenas, enteros o booleanos.

Establecer color de fondo con estilo en línea en React

De acuerdo con las reglas que mencionamos, la propiedad CSS background-color se convierte en backgroundColor en los estilos en línea de React. El valor de esta propiedad debe ser una cadena, ya sea un color con nombre.

Sintaxis:

<div style={{ backgroundColor: "red"}}></div>

Alternativamente, puede usar códigos HEX o RGBA, tal como lo haría en CSS.

<div style={{ backgroundColor: "#ff0000"}}></div>

Veamos un ejemplo de cómo aplicar estilos en línea en React.

Fragmento de código:

import "./styles.css";

export default function App() {
  return <div style={{ backgroundColor: "red", padding: 100 }}></div>;
}

Producción:

Puede ir a CodeSandbox para una demostración en vivo. Los estilos en línea de React se traducen a CSS normal si inspecciona el elemento.

Conclusión

Muchos principiantes se confunden con la sintaxis de los estilos en línea en React. Lo importante es recordar que las propiedades CSS con varios nombres de palabras se combinan y CamelCase.

Además, los nombres de propiedad no necesitan ser cadenas. Finalmente, los valores deben ser una cadena, un número entero o un valor booleano.