js{}

CSS a JS / Styled Components

Convertir CSS a objetos JS en camelCase o Styled Components

Transforma hojas de estilo CSS en objetos de estilo JavaScript en camelCase, JSON o template literals de Styled Components. Esencial para estilos inline de React, React Native y flujos de trabajo CSS-in-JS.

CSS

const styles = {
  backgroundColor: '#161b22',
  border: '1px solid #2d333b',
  paddingTop: '12px',
  paddingLeft: '16px',
  borderRadius: '6px',
  fontSize: '14px',
  color: '#e6edf3'
};

// guía rápida

Los frameworks modernos de JavaScript y React aplican estilos a los elementos mediante CSS-in-JS (como Styled Components) o mediante objetos de estilo inline. Este conversor traduce declaraciones CSS estándar en objetos de estilo JavaScript con sintaxis camelCase o plantillas para Styled Components.

Cómo usar esta herramienta:

Pega tu código CSS en el panel de entrada.
Elige el formato de salida deseado: JS Object (para propiedades style={} de React) o Styled Components.
Copia el objeto JS con camelCase o la plantilla literal de styled-component al instante.

// preguntas frecuentes

¿Por qué la sintaxis de estilos en JS utiliza camelCase?

Los objetos de estilo del DOM en JavaScript no pueden usar guiones (como <code>background-color</code>) porque los guiones se interpretan como operadores de resta. Por lo tanto, los nombres de propiedades CSS se convierten a camelCase (como <code>backgroundColor</code>).

¿Qué es Styled Components?

Styled Components es una biblioteca popular de React que utiliza plantillas literales etiquetadas para dar estilo a los componentes con código CSS real dentro de tus archivos de JavaScript.

¿Convierte unidades como px a números?

Para objetos de estilo en línea de React, valores como <code>margin: 10px</code> se traducen como cadenas (<code>margin: '10px'</code>) o números (si la propiedad acepta números sin unidad), garantizando la sintaxis JS correcta.