Anúncios incomodam? Ir Sem anúncios Hoje 

Conversor de CSS para Objeto de Estilo JavaScript

DadosDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Conversor de Objeto de Estilo CSS para JavaScript

Conversor de CSS para Objeto de Estilo JavaScript

Converta declarações CSS em objetos de estilo JavaScript instantaneamente, ou reverta o processo para ir de JS para CSS. Suporta cinco formatos de saída, incluindo estilos inline do React, React Native StyleSheet, styled-components, Emotion e objetos JS puros. Lida com prefixos de fornecedor, variáveis CSS, detecção de valores numéricos e blocos completos de regras CSS com remoção de seletores — tudo no lado do cliente no seu navegador.

Como usar

Cole suas declarações CSS na área de entrada e selecione seu formato de saída alvo. O conversor transforma automaticamente nomes de propriedade para camelCase, lida com prefixos de fornecedor e formata valores apropriadamente para o seu alvo escolhido. Mude para o modo JS-para-CSS para converter objetos de estilo JavaScript de volta para CSS padrão. Copie o resultado para sua área de transferência com um clique.

Características

Conversão bidirecional – Converta CSS em objetos de estilo JS ou objetos JS de volta para CSS
5 Formatos de Saída – Estilos inline do React, React Native StyleSheet, styled-components, Emotion css prop e objetos JavaScript puros
Tratamento de Prefixos de Fornecedor – Converte corretamente -webkit-transform para WebkitTransform, -moz-appearance para MozAppearance, e outras propriedades com prefixo de fornecedor
Valores Numéricos Inteligentes – Mantém números sem unidade como inteiros (margin: 0 permanece 0), remove unidades px para React Native, preserva valores de string com unidades para React
Suporte a Variáveis CSS – Lida com propriedades personalizadas (--custom-prop) e var() referências
Remoção de Seletores – Cole blocos completos de regras CSS e o conversor extrai apenas as declarações
Realce de Sintaxe – Saída com código de cores para CSS e JavaScript com cópia para a área de transferência

ANUNCIADO Remover?

 Perguntas frequentes

Por que as propriedades CSS precisam ser camelCased em JavaScript?

As chaves do objeto JavaScript não podem conter hifens como identificadores brutos. Uma propriedade como background-color seria interpretada como background menos color. A convenção no React e em outros frameworks JS é usar equivalentes camelCase: backgroundColor, fontSize, borderRadius. Este conversor lida com a transformação automaticamente, incluindo as regras especiais de capitalização para prefixos de fornecedor.
Qual é a diferença entre o tratamento de estilo do React e do React Native?

Estilos inline do React usam propriedades camelCase com valores de string que incluem unidades CSS, então font-size: 16px se torna fontSize: '16px'. React Native usa uma API StyleSheet onde valores de pixel são números puros sem unidades, então a mesma propriedade se torna fontSize: 16. React Native também não suporta todas as propriedades CSS, particularmente propriedades de atalho como margin com múltiplos valores.
Como os prefixos de fornecedor são convertidos para JavaScript?

Os prefixos de fornecedor seguem uma regra específica de capitalização em JavaScript. O prefixo perde seu hífen inicial e é capitalizado: -webkit-transform se torna WebkitTransform, -moz-appearance se torna MozAppearance e -ms-grid-columns se torna msGridColumns. Note que o prefixo ms é minúsculo por convenção, enquanto webkit, moz e o são capitalizados.
Posso converter styled-components ou Emotion CSS de volta para CSS puro?

Sim. Ao usar o modo JS-para-CSS, cole um objeto de estilo JavaScript e o conversor transformará propriedades camelCase de volta para propriedades CSS hifenizadas, desembrulhará valores de string e formatará a saída como declarações CSS padrão. Isso funciona independentemente de para qual framework JS os estilos originais foram escritos, pois todos eles usam a mesma convenção camelCase.