Banyak perpustakaan CSS-in-JS, sementara rangka kerja secara teorinya, mencari penggunaan utama mereka dalam projek React. Ini sebahagian besarnya disebabkan oleh kekurangan React dari penyelesaian gaya terbina dalam, tidak seperti Vue, Svelte, atau Angular. Pendekatan "membawa-anda sendiri" menawarkan fleksibiliti tetapi memerlukan pilihan strategi gaya. Walaupun CSS biasa tetap menjadi pilihan yang berdaya maju, perpustakaan CSS-in-JS menawarkan manfaat seperti:
Setiap perpustakaan menyediakan ciri -ciri unik, sering variasi atau sambungan di atas. Yang penting, menggunakan JavaScript untuk pengarang gaya tidak selalu bermaksud penghantaran gaya berasaskan JavaScript. Perpustakaan "Zero Runtime" menyusun gaya kepada CSS semasa proses membina, meningkatkan prestasi.
Gambaran keseluruhan ini disokong oleh rakan kongsi pembelajaran CSS-Tricks 'CSS-Tricks.
Frontend Masters menawarkan kursus yang komprehensif mengenai teknologi front-end terkemuka, termasuk latihan React Advanced.
Pertimbangkan kursus React Intermediate
Sebelum meneroka perpustakaan, nota:
Komponen gaya: sangat popular, yang dikenali dengan gaya dinamik dan variasi berasaskan prop. Menggunakan sintaks literal templat yang menyerupai CSS, walaupun sintaks objek juga disokong. Menawarkan SSR, tetapi bukan "sifar runtime."
Modul CSS: Mudah, gaya skop dan menggalakkan lokasi bersama. Ciri utamanya ialah komposisi (kombinasi kelas seperti mixin). Ia adalah penyelesaian proses-proses sahaja, menawarkan keupayaan "sifar runtime" yang benar apabila CSS diekstrak. Bekerja dengan HMR dan serasi dengan SASS. Bersepadu ke Next.Js.
Emosi: Membolehkan gaya CSS dengan JavaScript, menyediakan komposisi gaya, peta sumber, label, dan utiliti ujian. Menyokong kedua -dua gaya rentetan dan objek. Sama seperti komponen gaya tetapi dengan perbezaan prestasi yang berpotensi. Menyokong SSR tetapi bukan sifar-runtime. Glamor, glam, dan glamor tidak disengajakan memihak kepada emosi.
Jahitan: Mempunyai API varian yang mantap, integrasi editor TypeScript yang sangat baik, sokongan bertemakan, dan penciptaan utiliti. Menawarkan SSR, menghampiri sifar-runtime, tetapi tidak menjana fail CSS secara langsung.
Vanilla-Extract: terutamanya penyelesaian SSR; "Zero Runtime" melainkan ciri runtime tertentu diaktifkan. Menyediakan integrasi editor TypeScript yang sangat baik, API varian, dan API resipi (serupa dengan jahitan). Menyokong kelas bertemakan dan utiliti melalui taburan. Alternatif yang kuat kepada Aphrodite yang kini dikurangkan.
JSS: Termasuk Integrasi React, Sintaks Extend, dan Senibina Plugin.
Linaria: Perintis "sifar runtime" CSS-in-JS, menyusun fail CSS tetapi mengekalkan runtime untuk unsur-unsur dinamik. Sama seperti komponen gaya dalam API. Menyokong CSS kritikal.
JSX Styled: Plugin Babel yang memerlukan proses membina. Menggunakan a
Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.
Atas ialah kandungan terperinci Landskap CSS-in-react. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!