Convertitore di oggetti da CSS a JS
Converti le dichiarazioni CSS in un oggetto in stile React/JS e viceversa.
Convertitore di oggetti da CSS a JS
Incolla un blocco di dichiarazioni CSS e ottieni di nuovo un oggetto in stile JavaScript, pronto per essere inserito nella prop di stile di un componente React o Preact. Ogni proprietà kebab-case diventa camelCase — background-color diventa backgroundColor, font-size in fontSize — e il tutto viene stampato come un oggetto letterale valido con rientro a due spazi. Puoi incollare semplici dichiarazioni o una regola completa con un selettore e parentesi graffe; il selettore di wrap viene rimosso per te, quindi copiare una regola direttamente da DevTools funziona.
Il convertitore funziona in entrambe le direzioni. Cambia la direzione in Oggetto JS → CSS e un oggetto di stile torna ad essere normale prop: value; righe, con camelCase nuovamente sillabato e le virgolette rimosse. Ciò semplifica lo spostamento di uno stile da un componente a un foglio di stile o il controllo di come viene effettivamente visualizzato un insieme di stili in linea. Le proprietà personalizzate come --brand-color mantengono i trattini iniziali e rimangono tra virgolette, perché non sono identificatori validi e i prefissi dei fornitori vengono gestiti nel modo in cui React li aspetta: -webkit-box-shadow diventa WebkitBoxShadow, mentre i prefissi -ms- utilizzano la forma minuscola msFlex.
Per impostazione predefinita ogni valore viene emesso come una stringa, che è la scelta sicura: mantiene intatte unità, colori e cose come line-height: 1.5. Attiva "Valori senza unità come numeri" e i numeri puri come z-index o opacità verranno invece scritti come numeri, corrispondendo al modo in cui li digiteresti normalmente a mano. Puoi anche scegliere virgolette singole o doppie per adattarle al formattatore del tuo progetto.
Tutto funziona nel tuo browser. Il CSS che incolli non viene mai caricato, quindi gli stili incollati da un sistema di progettazione privato o da una libreria di componenti interni rimangono sul tuo computer. Copia il risultato, scaricalo come file o invialo a un altro strumento.