Konverter CSS u JS objekte
Pretvorite CSS deklaracije u React/JS inline-style objekt i natrag.
Konverter CSS u JS objekte
Zalijepite blok CSS deklaracija i vratite objekt JavaScript stila, spreman za ubacivanje u stilski dodatak React ili Preact komponente. Svako svojstvo kebab-case postaje camelCase — background-color pretvara se u backgroundColor, font-size u fontSize — i cijela se stvar ispisuje kao važeći objektni literal s dva razmaka. Možete zalijepiti gole deklaracije ili potpuno pravilo sa selektorom i zagradama; birač omatanja je skinut za vas, tako da kopiranje pravila izravno iz DevToolsa jednostavno funkcionira.
Pretvarač ide u oba smjera. Promijenite smjer na JS objekt → CSS i stilski objekt se vraća u obični prop: value; redaka, s ponovnim crticom i znakovima navodnika niza. To olakšava premještanje stila iz komponente u stilsku tablicu ili provjeru kako se skup ugrađenih stilova zapravo prikazuje. Prilagođena svojstva kao što je --brand-color zadržavaju svoje vodeće crtice i ostaju citirani jer nisu važeći identifikatori, a prefiksi dobavljača se obrađuju na način na koji React očekuje: -webkit-box-shadow postaje WebkitBoxShadow, dok -ms- prefiksi koriste mali oblik msFlex.
Prema zadanim postavkama svaka se vrijednost emitira kao niz, što je siguran izbor — jedinice, boje i stvari poput line-height: 1,5 ostaju netaknute. Uključite "Vrijednosti bez jedinice kao brojevi" i čisti brojevi kao što su z-indeks ili neprozirnost umjesto toga bit će zapisani kao brojevi, koji odgovaraju načinu na koji biste ih obično upisivali rukom. Također možete odabrati jednostruke ili dvostruke navodnike da odgovaraju formatu vašeg projekta.
Sve radi u vašem pregledniku. CSS koji zalijepite nikada se ne učitava, tako da lijepljenje stilova iz privatnog sustava dizajna ili interne biblioteke komponenti ostaje na vašem računalu. Kopirajte rezultat, preuzmite ga kao datoteku ili ga pošaljite drugom alatu.