Převaděč objektů CSS na JS
Převeďte deklarace CSS na objekt ve stylu React/JS a zpět.
Převaděč objektů CSS na JS
Vložte blok deklarací CSS a získejte zpět objekt ve stylu JavaScriptu, připravený k umístění do podpěry stylu komponenty React nebo Preact. Každá vlastnost kebab-case se změní na camelCase – barva pozadí se změní na backgroundColor, velikost písma na velikost písma – a celá věc se vytiskne jako platný objektový doslov s odsazením dvěma mezerami. Můžete vložit holé deklarace nebo úplné pravidlo se selektorem a složenými závorkami; selektor obtékání je odstraněn za vás, takže kopírování pravidla přímo z DevTools prostě funguje.
Převodník jde oběma směry. Přepněte směr na JS object → CSS a stylový objekt se změní zpět na obyčejnou prop: value; řádky, s camelCase opět pomlčkou a odstraněnými uvozovkami řetězce. Díky tomu je snadné přesunout styl z komponenty do šablony stylů nebo zkontrolovat, jak se sada vložených stylů skutečně vykresluje. Vlastní vlastnosti jako --brand-color si ponechají úvodní pomlčky a zůstanou v uvozovkách, protože nejsou platnými identifikátory a s předponami dodavatelů se zachází tak, jak je React očekává: -webkit-box-shadow se změní na WebkitBoxShadow, zatímco předpony -ms- používají malá písmena msFlex.
Ve výchozím nastavení je každá hodnota emitována jako řetězec, což je bezpečná volba – zachovává jednotky, barvy a věci jako výška řádku: 1,5 nedotčené. Zapněte „Hodnoty bez jednotek jako čísla“ a čistá čísla, jako je z-index nebo neprůhlednost, se místo toho zapisují jako čísla, která odpovídají tomu, jak byste je obvykle zadávali ručně. Můžete si také vybrat jednoduché nebo dvojité uvozovky, aby odpovídaly formátovači vašeho projektu.
Vše běží ve vašem prohlížeči. CSS, které vložíte, se nikdy nenahraje, takže vkládání stylů ze soukromého návrhového systému nebo interní knihovny komponent zůstane na vašem počítači. Zkopírujte výsledek, stáhněte jej jako soubor nebo jej odešlete do jiného nástroje.