Como os nomes de propriedade são convertidos?

Propriedades com hífen viram camelCase (font-size vira fontSize). Prefixos de fornecedor seguem as regras do React: -webkit- vira Webkit, enquanto -ms- permanece minúsculo ms.

E as propriedades personalizadas CSS?

Variáveis como --main-color mantêm o nome e viram uma chave entre aspas, já que o React as aplica literalmente.

Os valores são convertidos para números?

Não. Todos os valores são emitidos como strings entre aspas, o que é sempre válido. Remova as aspas manualmente para valores numéricos sem unidade se preferir.

Meu CSS é enviado para algum lugar?

Não. A conversão ocorre inteiramente no seu navegador; nada é enviado.

Conversor de CSS para objeto de estilo JS

Cole declarações CSS (propriedade: valor;) e obtenha um objeto de estilo JavaScript com chaves em camelCase, pronto para a prop `style` do React ou qualquer estilização JS. Prefixos de fornecedor e propriedades personalizadas CSS são tratados. Tudo roda localmente no seu navegador — nada é enviado.

—

Declarações CSS

Objeto de estilo JS

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

Como usar

Cole suas declarações CSS na caixa de entrada.
Cada propriedade vira camelCase e cada valor é citado como string.
Copie o objeto de estilo gerado da caixa de saída.

Perguntas frequentes

Como os nomes de propriedade são convertidos?: Propriedades com hífen viram camelCase (font-size vira fontSize). Prefixos de fornecedor seguem as regras do React: -webkit- vira Webkit, enquanto -ms- permanece minúsculo ms.
E as propriedades personalizadas CSS?: Variáveis como --main-color mantêm o nome e viram uma chave entre aspas, já que o React as aplica literalmente.
Os valores são convertidos para números?: Não. Todos os valores são emitidos como strings entre aspas, o que é sempre válido. Remova as aspas manualmente para valores numéricos sem unidade se preferir.
Meu CSS é enviado para algum lugar?: Não. A conversão ocorre inteiramente no seu navegador; nada é enviado.

Ferramentas relacionadas

Conversor HTML → JSX

Cole um snippet HTML e receba JSX pronto pra React — `class` vira `className`, `onclick` vira `onClick`, tags void se auto-fecham, estilos inline podem ser objetificados.

Desenvolvimento 0 0

Objeto JS ↔ JSON

Converte um literal de objeto JavaScript (`{name: 'Alice'}`) pra JSON estrito — ou JSON estrito de volta pra um literal JS limpo com chaves sem aspas.

Converter 0 0

Minificador HTML / CSS / JS

Tire espaços e comentários de HTML, CSS ou JavaScript — veja o tamanho economizado e copie o resultado.

Desenvolvimento 0 0

Gerador de EditorConfig

Crie um arquivo .editorconfig com estilo de indentação, fim de linha, charset e overrides comuns, no seu navegador.

Desenvolvimento 0 0

Testador de seletores CSS

Teste um seletor CSS contra seu HTML e veja exatamente quais elementos correspondem, no seu navegador.

Desenvolvimento 0 0

Playground de CSS Flexbox

Escolha visualmente flex-direction, justify-content, align-items e gap — copie o CSS ou a classe Tailwind.

Desenvolvimento 0 0