CSS2JS

Para agregar estilos en línea en un elemento en JSX, debe hacerlo en esta sintaxis de objeto, como:

div style={{  fontSize: 16,  marginBottom: "1rem"}}  Content/div

Eso puede parecer un poco extraño para nosotros, las personas que estamos tan acostumbradas a la sintaxis CSS, donde está font-size(no fontSize), margin-bottom(no marginBottom) y punto y coma (no comas).

Eso no es que JSX (o React o lo que sea) sea extraño, así es como son los estilos en JavaScript. Si quisieras configurar font-sizedesde cualquier otro JavaScript, tendrías que hacer:

div.style.fontSize = "16px";

Lo digo, pero otras API quieren que use la sintaxis CSS, como:

window.getComputedStyle(document.body)  .getPropertyValue("font-size");

También hay muchas bibliotecas CSS-in-JS que requieren u opcionalmente admitir la configuración de estilos en este formato de objeto. Incluso he oído que con las bibliotecas que admiten tanto el formato CSS (a través de literales de plantilla) como el formato de objeto (por ejemplo, Emotion), algunas personas prefieren la sintaxis de objeto a la sintaxis de CSS porque se siente más a gusto en el JavaScript circundante y es un poco menos detallado cuando se hacen cosas como lógica o inyectar variables.

De todos modos, el motivo real de la publicación es este pequeño sitio web que encontró que convierte el formato CSS al formato de objeto. CSS2JS:

Definitivamente útil si tuvieras un gran bloque de estilos para convertir.

Enlace directo →