¿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.

¿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.

Conversor de CSS a objeto de estilo JS

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.

—

Declaraciones CSS

Objeto de estilo JS

{
  backgroundColor: "#fff",
  fontSize: "14px",
  WebkitTransform: "scale(1.2)",
  margin: "0 auto",
}

Cómo usar

Pega tus declaraciones CSS en el cuadro de entrada.
Cada propiedad se pasa a camelCase y cada valor se cita como cadena.
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

Conversor HTML → JSX

Pega un snippet HTML y obtén JSX listo para React — `class` se vuelve `className`, `onclick` se vuelve `onClick`, los tags void se auto-cierran, los estilos inline pueden objetificarse.

Desarrollo 0 0

Objeto JS ↔ JSON

Convierte un literal de objeto JavaScript (`{name: 'Alice'}`) a JSON estricto — o JSON estricto de vuelta a un literal JS limpio con claves sin comillas.

Convertir 0 0

Minificador HTML / CSS / JS

Quita espacios y comentarios de HTML, CSS o JavaScript — ve el tamaño ahorrado y copia el resultado.

Desarrollo 0 0

Generador de EditorConfig

Crea un archivo .editorconfig con estilo de sangría, fin de línea, charset y overrides comunes, en tu navegador.

Desarrollo 0 0

Probador de selectores CSS

Prueba un selector CSS contra tu HTML y ve exactamente qué elementos coinciden, en tu navegador.

Desarrollo 0 0

Playground de CSS Flexbox

Elige visualmente flex-direction, justify-content, align-items y gap — copia el CSS o la clase Tailwind.

Desarrollo 0 0