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. Recetas para Cookeo

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

CSS2JS

CSS2JS

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

programar

es

https://pseint.es/static/images/programar-css2js-1329-0.jpg

2024-06-13

 

CSS2JS
CSS2JS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences