Conversor de CSS para JS
Converta declarações CSS em um objeto de estilo JS (React inline style, React Native StyleSheet, styled-components, Emotion ou objeto simples) — e volte de JS para CSS.
Entrada
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "css-to-js",
"cssInput": ".container {\n display: flex;\n background-color…",
"outputFormat": "react"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-to-js-converter` tool (CSS to JS Converter) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-to-js-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Conversor de CSS para JS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
Bibliotecas CSS-in-JS e React não aceitam sintaxe CSS simples — eles querem um objeto JavaScript onde as propriedades sejam camelCase e os valores sejam (principalmente) strings entre aspas. Esta ferramenta converte declarações CSS que você já possui — copiadas de uma folha de estilo, uma exportação de ferramenta de design ou escrita manualmente — para essa forma de objeto, e pode converter também na outra direção: cole um objeto de estilo JS e obtenha CSS simples de volta.
Suporta cinco formatos de saída CSS-para-JS:
- React Inline Style — um objeto
const styles = { ... }simples, pronto parastyle={styles}. - React Native StyleSheet — envolvido em
StyleSheet.create({ container: { ... } }), com unidadespxremovidas para números simples (React Native não possui strings de unidade). - styled-components — um template literal com tag (
styled.div\...``), que mantém seu CSS kebab-case original, já que styled-components aceita sintaxe CSS real. - Emotion css Prop — a mesma forma de objeto camelCase que React, envolvida em
css({ ... }). - Objeto JS Simples — apenas o literal do objeto, sem declaração de variável ao redor, para colar em seu próprio código.
Como usar
- Escolha uma Direção: "CSS para JS" (padrão) ou "JS para CSS".
- Cole suas declarações CSS (um bloco de regra completo como
.card { ... }ou linhas deproperty: value;simples funcionam igualmente) — ou, para JS para CSS, cole um objeto de estilo JS. - Para CSS para JS, escolha um Formato de Saída entre as cinco opções acima.
- O código convertido aparece instantaneamente na caixa de saída. Copie-o ou baixe como
styles.js.
Detalhes da conversão
- Nomes de propriedade convertem kebab-case para camelCase (
background-color→backgroundColor) e vice-versa. - Propriedades com prefixo de fornecedor seguem a convenção React:
-webkit-transform→WebkitTransform,-ms-overflow-style→msOverflowStyle(minúsculoms, ao contrário de outros prefixos). - Propriedades CSS customizadas (
--my-color) são deixadas intocadas e entre aspas como chaves de objeto. - Valores numéricos simples (
z-index: 10,line-height: 1.5) tornam-se números JS sem aspas; tudo o mais torna-se uma string entre aspas simples. React Native também converte valorespxcomopadding: 16pxpara o número simples16. - A ordem de declaração em sua entrada é preservada na saída.
FAQ
Ela lida com uma regra CSS completa ou apenas declarações simples?
Ambas. Cole uma regra completa (.container { display: flex; ... }) e o seletor é automaticamente removido, ou cole apenas as declarações separadas por ponto-e-vírgula por conta própria.
O que "JS para CSS" produz?
Um único bloco .selector { ... } com chaves camelCase convertidas de volta para kebab-case. Os valores são copiados como estão, já que a ferramenta não pode saber qual unidade um número simples pretendia ter.
Por que a saída de styled-components parece diferente dos outros formatos? O template literal com tag de styled-components aceita sintaxe CSS real, então esse formato mantém seus nomes e valores de propriedade originais literalmente em vez de converter para um objeto JS.
Ela irá validar meu CSS ou sintaxe JS? Não — este é um parser leve, não um parser CSS/JS completo. A entrada malformada é parseada com o melhor esforço; se nada utilizável for encontrado, a saída explica isso em vez de falhar silenciosamente.
Privacidade
Toda conversão acontece localmente em seu navegador. Nada que você cole é enviado ou armazenado.