Pular para o conteúdo principal
iotools.cloudiotools.cloud

Conversor de CSS para JS Style

Converta declarações CSS para um objeto React inline style, React Native StyleSheet ou um template literal styled-components/Emotion — e converta objetos de estilo JS volta para CSS puro.

Entrada

Saída

Saída
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-style-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "conversionDirection": "css-to-js",
    "outputFormat": "react-inline",
    "cssInput": "background-color: #3b82f6;\nfont-size: 16px;\nopac…"
  }'

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-style-converter` tool (CSS to JS Style Converter) on this input:

YOUR_INPUT_HERE

Cole 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-style-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Conversor de CSS para JS Style — 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/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

O que essa ferramenta faz

Cole um bloco de declarações CSS e obtenha um objeto JavaScript style pronto para usar — ou faça o caminho inverso e converta um objeto JS style de volta para CSS puro. Esta ferramenta visa as três formas como CSS aparece no código moderno de UI em JavaScript, cada uma com regras diferentes para nomes de propriedades e valores:

  • React Inline Style — um objeto simples com chaves camelCase (backgroundColor, fontSize) para a prop style. Valores de pixel numéricos são convertidos para números simples onde React acrescenta automaticamente px (fontSize: 16), enquanto propriedades unitless como opacity e fontWeight permanecem numéricas porque o próprio CSS as trata como unitless.
  • React Native StyleSheet — a mesma conversão camelCase, envolvida em StyleSheet.create({ container: { ... } }). Propriedades de layout (width, margin, padding, borderRadius, fontSize e similares) têm seu sufixo px removido, pois as medidas React Native são números unitless por convenção.
  • styled-components / Emotion — um template literal com tag (const styles = css`...`;). Diferentemente dos outros dois formatos, os nomes de propriedades permanecem em seu kebab-case original e os valores são copiados verbatim — styled-components e Emotion analisam a sintaxe CSS real dentro do template literal, então nenhuma conversão camelCase ou coerção numérica ocorre aqui.

Alterar a Direção de Conversão para JavaScript → CSS inverte o processo: cole um objeto JS style (chaves entre aspas ou não, valores string ou numéricos) e obtenha de volta linhas CSS padrão property: value;. Valores numéricos são re-expandidos para pixels a menos que a propriedade seja uma das unitless (opacity, zIndex, flex, lineHeight, etc.), que são gravadas de volta como números simples.

Como usar

  1. Escolha uma Direção de Conversão — CSS → JavaScript ou JavaScript → CSS.
  2. Para CSS → JavaScript, escolha um Formato de Saída: React Inline Style, React Native StyleSheet ou styled-components/Emotion.
  3. Cole suas declarações CSS (ou objeto JS style) na caixa de entrada, como linhas property: value; soltas ou envolvidas em um bloco selector { ... }.
  4. A saída é atualizada automaticamente conforme você digita.

FAQ

Por que font-size: 16px se torna fontSize: 16 no React mas permanece font-size: 16px no styled-components? A prop style inline do React trata números simples na maioria das propriedades como pixels, então a ferramenta remove px. styled-components e Emotion renderizam texto CSS literal, então a unidade deve permanecer.

Quais propriedades mantêm seu px no React Native? Apenas as que React Native espera números para: dimensões, espaçamento (margin*, padding*), deslocamentos de posição, larguras/raios de borda, fontSize, letterSpacing e propriedades de gap. Qualquer outra coisa é citada como string.

Ele lida com propriedades com prefixo de fornecedor? Sim — os prefixos -webkit-, -moz-, -ms- e -o- são convertidos para seus equivalentes JS (WebkitTransform, MozTransform, msTransform, OTransform) e vice-versa.

Ele entende seletores CSS completos ou regras aninhadas? Não — apenas lê as declarações, sejam digitadas soltas ou envolvidas em um único bloco { ... }. Seletores, media queries e regras aninhadas não são analisadas.

O que acontece com propriedades customizadas CSS (--my-var)? Declarações que definem uma propriedade customizada (começando com --) são ignoradas na direção CSS → JS; usar var(--my-var) como valor é preservado como está.

Privacidade

Esta ferramenta funciona inteiramente em seu navegador — seu CSS e JavaScript nunca saem de seu dispositivo ou tocam um servidor.

cssjavascriptreactreact-nativestyled-componentsemotioncss-in-jsconverter

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios