Pustaka CSS-in-JS, seperti komponen gaya, telah menjadi lebih populer dalam beberapa tahun terakhir. Mereka merangkum CSS hingga ke tingkat komponen dan memungkinkan Anda menggunakan JavaScript untuk menentukan gaya yang dapat digunakan kembali.
Dengan menggunakan komponen bergaya, Anda dapat mempertahankan arsitektur berbasis komponen yang telah diperkuat oleh React. Tetapi perpustakaan juga memiliki beberapa kelemahan.
Bagaimana Komponen Bergaya Bekerja
Itu gaya-komponen Pustaka CSS-in-JS memungkinkan Anda untuk menulis CSS di dalam file komponen Anda. Sintaksnya sama dengan CSS, jadi cukup mudah untuk diambil. Ini adalah jalan tengah yang sempurna untuk pengembang JavaScript yang cenderung menjauhi CSS murni.
Untuk melihat cara kerjanya, pertimbangkan komponen Judul berikut yang merender elemen h1.
konstan Judul = styled.h1`
ukuran huruf: 1.5em;
perataan teks: tengah;
warna merah;
`;
Anda dapat menggunakan komponen ini seperti komponen React lainnya.
konstan Beranda = () => {
kembali (
<Judul>Judul komponen bergaya</Title>
)
}
Ini juga sangat kuat karena membuatnya lebih mudah untuk bekerja dengan alat peraga dan status.
Misalnya, warna dan latar belakang komponen ini bergantung pada properti.
impor bergaya dari "komponen-gaya";konstan Tombol = styled.button`
lapisan: 0.8rem 1.6rem;
warna latar belakang: ${(alat peraga) => (alat peraga. utama? "ungu": "putih")};
berbatasan: 1px padat #00000;
warna: ${(alat peraga) => (alat peraga. utama? "putih": "ungu")};
`;
eksporbawaanfungsiRumah() {
kembali <Tombol utama>Utama</Button>
}
Dengan komponen yang ditata, Anda tidak perlu meneruskan props secara manual ke CSS. Ini tersedia secara otomatis, menyederhanakan gaya penulisan yang bergantung pada data dari komponen.
Kelebihan Menggunakan Komponen Bergaya
Berikut adalah beberapa keuntungan menggunakan perpustakaan komponen gaya.
Ini Memecahkan Masalah Kekhususan CSS
Komponen yang ditata menghilangkan masalah kekhususan karena mengenkapsulasi CSS di dalam komponen. Ini berarti Anda tidak perlu khawatir tentang bentrokan nama kelas atau UI Anda menjadi berantakan karena bentrokan nama kelas.
Memungkinkan Anda Menulis CSS Di Dalam Komponen
Seperti yang terlihat dari contoh komponen tombol, komponen gaya memungkinkan Anda untuk menggabungkan CSS dan JS dalam file yang sama. Jadi, Anda tidak perlu membuat file CSS terpisah atau terus berpindah dari satu file ke file lainnya.
Ini adalah keuntungan besar saat membuat kit UI karena Anda menyimpan semua fungsionalitas komponen dalam satu file.
Selain itu, menulis CSS di dalam komponen. Itu membuatnya lebih mudah untuk berbagi alat peraga dan status dengan gaya.
Mengizinkan Pengecekan Jenis
Dengan komponen bergaya, Anda dapat mengetik-memeriksa properti dan nilai yang digunakan dalam gaya Anda. Misalnya, Anda dapat menulis ulang komponen tombol di atas menggunakan TypeScript.
antarmukaAtribut{
utama: boolean
}
const Tombol = styled.button<Atribut>`
lapisan: 0.8rem 1.6rem;
warna latar belakang: ${(alat peraga) => (alat peraga. utama? "ungu": "putih")};
berbatasan: 1px padat #00000;
warna: ${(alat peraga) => (alat peraga. utama? "putih": "ungu")};
`;
Menggunakan TypeScript di komponen berarti memeriksa kesalahan jenis saat Anda membuat kode dan mengurangi waktu debugging.
Mendukung Tema Di Luar Kotak
Menambahkan tema gelap atau tema lain untuk aplikasi Anda bisa jadi sulit dan memakan waktu. Namun, komponen Styled menyederhanakan proses. Anda dapat menambahkan tema ke aplikasi Anda dengan mengekspor a
konstan Tombol = styled.main`
warna latar belakang: ${props => props.theme.light.background};
warna: ${alat peraga => props.theme.light.fontColor};
`
<ThemeProvider theme={tema}>
<Tombol>
tombol cahaya
</Button>
</ThemeProvider>
Komponen ThemeProvider meneruskan tema ke semua komponen gaya yang dibungkusnya. Komponen ini kemudian dapat menggunakan nilai tema dalam gayanya. Dalam contoh ini, tombol menggunakan nilai tema untuk latar belakang dan warna font.
Kontra Menggunakan Komponen Bergaya
Meskipun menggunakan pustaka komponen gaya memiliki banyak manfaat, ia juga memiliki kelemahan.
Ini Bukan Kerangka Independen
Menulis CSS di JS berarti memisahkan keduanya di masa depan akan sulit, yang mengerikan untuk pemeliharaan. Misalnya, jika Anda memutuskan untuk mengganti kerangka kerja JavaScript, Anda harus menulis ulang sebagian besar basis kode Anda.
Ini memakan waktu dan biaya. Menggunakan modul CSS atau kerangka kerja perpustakaan independen seperti emosi lebih tahan masa depan.
Mungkin Sulit Dibaca
Membedakan antara komponen gaya dan React bisa jadi sulit, terutama di luar sistem desain atomik. Pertimbangkan contoh ini:
<Utama>
<navigasi>
<Daftar barang>
<Teks Tautan>Mengadopsi Hewan Peliharaan</LinkText>
</ListItem>
<Daftar barang>
<Teks Tautan>Menyumbangkan</LinkText>
</ListItem>
</Nav>
<Tajuk>Adopsi, jangan't toko!</Header>
<SekunderBtn btnText="Menyumbangkan" />
</Main>
Satu-satunya cara untuk mengetahui komponen mana yang berisi logika bisnis adalah dengan memeriksa apakah komponen tersebut memiliki props. Selanjutnya, meskipun nama komponen dalam contoh ini deskriptif, masih sulit untuk memvisualisasikannya.
Misalnya, komponen Header mungkin merupakan heading, tetapi kecuali Anda memeriksa gayanya, Anda mungkin tidak akan pernah tahu apakah itu h1, h2, atau h3.
Beberapa pengembang memecahkan masalah ini dengan hanya menggunakan komponen gaya sebagai pembungkus dan menggunakan tag HTML semantik untuk elemen di dalamnya.
Dalam contoh ini, komponen header dapat menggunakan tag h1.
<h1>Adopsi, jangan't toko!</h1>
Anda dapat mengambil ini lebih jauh dengan mendefinisikan komponen gaya dalam file lain (misalnya styled.js), yang nantinya dapat Anda impor ke dalam komponen React.
impor * sebagai Bergaya dari './bergaya'
// gunakan styled.components
<bergaya. Utama>
// kode
</styled.Main>
Melakukan hal ini memberi Anda pandangan yang jelas tentang komponen mana yang ditata dan mana yang merupakan komponen React.
Komponen Bergaya Dikompilasi saat Runtime
Untuk aplikasi yang menggunakan komponen bergaya, browser mengunduh CSS dan mem-parsingnya menggunakan JavaScript sebelum memasukkannya ke dalam halaman. Ini menyebabkan masalah kinerja karena pengguna harus mengunduh banyak JavaScript di pemuatan awal.
CSS statis jauh lebih cepat. Itu tidak perlu diproses sebelum browser menggunakannya untuk menata halaman. Namun, pustaka komponen gaya meningkat dengan setiap rilis. Jika Anda mampu membayar beberapa penurunan kinerja, lanjutkan dan gunakan.
Kapan Menggunakan Komponen Bergaya
Beberapa pengembang senang menulis CSS dalam file JS, sementara yang lain lebih suka memiliki file CSS terpisah. Bagaimana Anda memilih untuk menulis CSS pada akhirnya harus bergantung pada proyek itu sendiri dan apa yang Anda atau tim Anda sukai. Komponen gaya adalah pilihan yang baik untuk membangun perpustakaan UI karena semuanya bisa dalam satu file dan mudah diekspor dan digunakan kembali.
Jika Anda lebih suka menulis CSS murni, gunakan modul CSS. Anda dapat memiliki file CSS terpisah, dan secara default mencakup gaya secara lokal. Terlepas dari pilihan apa yang Anda buat, memiliki pengetahuan CSS yang solid sangat penting.