AZ Tools

Conversor de CSS a objeto de estilo JS

Desarrollo

Pega declaraciones CSS (propiedad: valor;) y obtén un objeto de estilo JavaScript con claves en camelCase, listo para la prop `style` de React o cualquier estilizado JS. Se manejan los prefijos de proveedor y las propiedades personalizadas CSS. Todo se ejecuta localmente en tu navegador: no se sube nada.

Objeto de estilo JS

Cómo usar

  1. Pega tus declaraciones CSS en el cuadro de entrada.
  2. Cada propiedad se pasa a camelCase y cada valor se cita como cadena.
  3. Copia el objeto de estilo generado del cuadro de salida.

Preguntas frecuentes

¿Cómo se convierten los nombres de propiedad?
Las propiedades con guion pasan a camelCase (font-size se vuelve fontSize). Los prefijos de proveedor siguen las reglas de React: -webkit- se vuelve Webkit, mientras que -ms- queda en minúscula ms.
¿Y las propiedades personalizadas CSS?
Las variables como --main-color conservan su nombre y se vuelven una clave entre comillas, ya que React las aplica tal cual.
¿Los valores se convierten a números?
No. Todos los valores se emiten como cadenas entre comillas, lo cual siempre es válido. Quita las comillas manualmente para valores numéricos sin unidad si lo prefieres.
¿Se envía mi CSS a algún sitio?
No. La conversión ocurre por completo en tu navegador; no se sube nada.

Herramientas relacionadas