Informazioni su questo strumento
Lo strumento Da CSS a oggetto style JS converte un blocco di CSS in un oggetto JavaScript adatto agli stili inline React o a librerie CSS-in-JS come styled-components ed Emotion. Analizza le dichiarazioni localmente nel tuo browser — nulla viene caricato — così migrare un foglio di stile a stili inline è a un incolla-e-copia di distanza.
Ogni nome di proprietà viene reso in camelCase: background-color diventa backgroundColor, z-index diventa zIndex. I prefissi vendor seguono le regole di React — un -ms- iniziale diventa minuscolo ms (msFilter), mentre -webkit-, -moz- e -o- diventano maiuscoli Webkit, Moz e O (WebkitBoxShadow). Le custom property (--brand-color) vengono mantenute verbatim come chiavi virgolettate. I valori vengono emessi come stringhe per impostazione predefinita, preservando unità e !important; un interruttore numerico permette agli interi e decimali nudi di diventare numeri senza virgolette. Le chiavi che sono identificatori JavaScript validi vengono lasciate senza virgolette; le altre vengono virgolettate automaticamente.
Quando l'input è un semplice blocco di dichiarazioni (senza selettori) produce un unico oggetto piatto, perfetto per una prop style di React. Quando l'input contiene regole complete con selettori, la modalità styled/Emotion emette un oggetto annidato indicizzato per ogni stringa di selettore — la sintassi a oggetto che quelle librerie accettano. Controlli il nome della const di output, e il tutto viene scritto come const styles = { ... }; pronto da incollare.