O tym narzędziu
Narzędzie CSS na obiekt stylów JS konwertuje blok CSS w obiekt JavaScript odpowiedni dla stylów inline React lub bibliotek CSS-in-JS, takich jak styled-components i Emotion. Parsuje deklaracje lokalnie w Twojej przeglądarce — nic nie jest przesyłane — więc migracja arkusza stylów do stylów inline to kwestia wklejenia i skopiowania.
Każda nazwa właściwości jest zamieniana na camelCase: background-color staje się backgroundColor, z-index staje się zIndex. Prefiksy producentów podążają za regułami React — wiodące -ms- przechodzi na małe ms (msFilter), podczas gdy -webkit-, -moz- i -o- przechodzą na wielką literę Webkit, Moz i O (WebkitBoxShadow). Właściwości niestandardowe (--brand-color) są zachowywane dosłownie jako klucze w cudzysłowie. Wartości są domyślnie emitowane jako łańcuchy, zachowując jednostki i !important; przełącznik numeryczny pozwala gołym liczbom całkowitym i dziesiętnym stać się liczbami bez cudzysłowów. Klucze będące prawidłowymi identyfikatorami JavaScript pozostają bez cudzysłowów; reszta jest ujmowana w cudzysłów automatycznie.
Gdy wejściem jest zwykły blok deklaracji (bez selektorów), tworzy jeden płaski obiekt, idealny do propa style React. Gdy wejście zawiera pełne reguły z selektorami, tryb styled/Emotion emituje zagnieżdżony obiekt kluczowany każdym łańcuchem selektora — składnia obiektu, którą te biblioteki akceptują. Kontrolujesz nazwę const wyjścia, a całość jest zapisywana jako const styles = { ... }; gotowa do wklejenia.