Menggunakan React, biasanya menyimpan gaya Anda dalam file CSS global. Hal ini dapat mempersulit pencarian gaya untuk komponen tertentu, terutama saat Anda mengerjakan proyek besar. Dengan komponen yang diberi gaya, menemukan gaya untuk komponen tertentu menjadi mudah karena berada dalam file yang sama dengan komponen.
Mari kita lihat cara menyiapkan dan mengintegrasikan komponen bergaya di aplikasi React Anda.
Menginstal Perpustakaan komponen-gaya
Anda dapat menginstal komponen-gaya dengan menjalankan perintah ini di terminal Anda:
npm i komponen-gaya
Untuk menginstal komponen bergaya menggunakan benang, jalankan:
benang menambahkan komponen gaya
Membuat Komponen Bergaya
Komponen yang diberi gaya sama seperti komponen Bereaksi standar, dengan gaya. Ada berbagai pro dan kontra dari komponen bergaya, yang penting untuk dipertimbangkan untuk penggunaan yang benar.
Sintaks umum terlihat seperti ini:
impor bergaya dari"gaya-komponen";
const NamaKomponen = ditata. DOMElementTag`
cssProperty: cssValue
`
Di sini Anda mengimpor bergaya dari gaya-komponen perpustakaan. Itu bergaya function adalah metode internal yang mengubah kode JavaScript menjadi CSS sebenarnya. Itu Nama komponen adalah nama komponen yang diberi gaya. Itu DOMElementTag adalah elemen HTML/JSX yang ingin Anda gaya, seperti div, span, tombol, dll.
Untuk membuat tombol bergaya menggunakan komponen bergaya, pertama-tama Anda harus membuat komponen React yang berisi elemen tombol.
Seperti itu:
impor Reaksi dari"reaksi";
fungsiTombol() {
kembali (
Sekarang Anda dapat membuat gaya untuk tombol menggunakan komponen-gaya:
impor bergaya dari"gaya-komponen";
const StyledButton = tombol.gaya`
lapisan: 1rem 0.8rem;
radius batas: 15px;
background-color: abu-abu;
warna: #FFFFFF;
ukuran huruf: 15px;
`
Menyatukan semuanya, Anda harus mengganti tombol tag dengan StyledButton komponen:
impor bergaya dari"gaya-komponen";
impor Reaksi dari"reaksi";const StyledButton = tombol.gaya`
lapisan: 1rem 0.8rem;
radius batas: 15px;
background-color: abu-abu;
warna: #FFFFFF;
ukuran huruf: 15px;
`
fungsiTombol() {
kembali (Selamat datang!!!</StyledButton>
)
}
Gaya Bersarang
Anda juga dapat menyusun gaya saat bekerja dengan komponen yang diberi gaya. Komponen bergaya bersarang agak mirip menggunakan Bahasa Ekstensi SASS/SCSS. Anda dapat menyusun gaya jika komponen berisi beberapa tag elemen dan ingin memberi gaya pada setiap tag satu per satu.
Misalnya:
impor Reaksi dari'reaksi';
fungsiAplikasi() {
kembali (Komponen Bergaya</h1>
Selamat datang di komponen-gaya</p>
</div>
)
}
Kode ini membuat komponen yang berisi an h1 elemen dan a P elemen.
Anda dapat memberi gaya pada elemen ini menggunakan fitur gaya bersarang dari komponen yang diberi gaya:
impor Reaksi dari'reaksi';
impor bergaya dari'gaya-komponen';const StyledApp = styled.div`
warna: #333333;
perataan teks: tengah;h1 {
ukuran huruf: 32px;
font-style: miring;
font-berat: tebal;
spasi huruf: 1.2rem;
transformasi teks: huruf besar;
}P {
margin-blok-mulai: 1rem;
ukuran huruf: 18px;
}
`
fungsiAplikasi() {
kembali (Komponen Bergaya</h1>
Selamat datang di komponen-gaya</p>
</StyledApp>
)
}
Kode ini menggunakan komponen yang diberi gaya dan menyarangkan gaya untuk h1 Dan P tag.
Membuat dan Menggunakan Variabel
Kemampuan untuk membuat variabel adalah fitur luar biasa dari pustaka komponen-gaya. Kemampuan ini memberikan gaya dinamis di mana Anda dapat menggunakan variabel JavaScript untuk menentukan gaya.
Untuk menggunakan variabel dalam komponen-gaya, buat variabel, dan berikan nilai properti CSS padanya. Anda kemudian dapat menggunakan variabel itu secara langsung di CSS Anda, misalnya:
impor bergaya dari"gaya-komponen";const Warna Utama = "merah";
const Heading = style.h1`
warna: ${MainColor};
`;
fungsiAplikasi() {
kembali (
<>Halo Dunia!</Heading>
</>
);
}
Di blok kode di atas, teks “Halo Dunia!” akan ditampilkan dalam warna merah.
Perhatikan bahwa contoh ini hanya menggunakan variabel JavaScript standar dalam literal template bersama dengan komponen yang diberi gaya. Ini pendekatan yang berbeda dari menggunakan variabel CSS.
Memperluas Gaya
Setelah membuat komponen bergaya, Anda akan menggunakan komponen tersebut. Anda mungkin ingin membuat perbedaan halus atau menambahkan lebih banyak gaya dalam beberapa situasi. Dalam kasus seperti ini, Anda dapat memperluas gaya.
Untuk memperluas gaya, Anda membungkus komponen yang diberi gaya di ditata() konstruktor, lalu sertakan gaya tambahan apa pun.
Dalam contoh ini, Tombol Utama komponen mewarisi gaya komponen Tombol dan menambahkan warna latar belakang biru yang berbeda.
impor bergaya dari"gaya-komponen";
impor Reaksi dari"reaksi";const Tombol = ditata.tombol`
lapisan: 1rem 0.8rem;
radius batas: 15px;
background-color: abu-abu;
warna: #FFFFFF;
ukuran huruf: 15px;
`const PrimaryButton = ditata (Tombol)`
background-color: biru;
`
fungsiAplikasi() {
kembali (
Anda juga dapat mengubah tag yang dirender oleh komponen bergaya menggunakan sebagai penyangga.
Itu sebagai prop memungkinkan Anda untuk menentukan elemen HTML/JSX yang mendasari yang akan dirender oleh komponen yang diberi gaya.
Misalnya:
impor bergaya dari"gaya-komponen";
impor Reaksi dari"reaksi";const Tombol = ditata.tombol`
lapisan: 1rem 0.8rem;
radius batas: 15px;
background-color: abu-abu;
warna: #FFFFFF;
ukuran huruf: 15px;
`
fungsiAplikasi() {
kembali (
Kode ini merender Tombol komponen sebagai A elemen, pengaturannya href atribut untuk '#'.
Membuat Gaya Global
Komponen yang diberi gaya biasanya dicakupkan ke sebuah komponen, jadi Anda mungkin bertanya-tanya bagaimana cara mengatur gaya aplikasi secara keseluruhan. Anda dapat mengatur gaya aplikasi dengan menggunakan gaya global.
Styled-Components menawarkan a createGlobalStyle fungsi yang memungkinkan Anda mendeklarasikan gaya secara global. Itu createGlobalStyle menghapus batasan gaya cakupan komponen dan memungkinkan Anda mendeklarasikan gaya yang berlaku untuk setiap komponen.
Untuk membuat gaya global, Anda mengimpor file createGlobalStyle berfungsi dan nyatakan gaya yang Anda butuhkan.
Misalnya:
impor {buatGlobalStyle} dari'gaya-komponen';const GlobalStyles = buatGlobalStyle`
@impor url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
batas: 0;
lapisan: 0;
ukuran kotak: kotak batas;
}tubuh {
warna latar belakang: #343434;
ukuran huruf: 15px;
warna: #FFFFFF;
keluarga font: 'Montserrat', Sans Serif;
}
`
eksporbawaan GlobalStyles;
Kemudian Anda mengimpor file GlobalStyles komponen ke dalam komponen aplikasi Anda dan merendernya. Rendering GlobalStyles komponen dalam komponen aplikasi Anda akan menerapkan gaya ke aplikasi Anda.
Seperti itu:
impor Reaksi dari'reaksi';
impor GlobalStyles dari'./Global';
fungsiAplikasi() {
kembali (
</div>
)
}
Lebih ke Komponen Bergaya
Anda telah mempelajari cara menyiapkan, menginstal, dan menggunakan komponen bergaya dalam aplikasi React Anda. Pustaka komponen-gaya adalah cara yang efisien untuk menata aplikasi React Anda. Ini menyediakan banyak fitur berguna yang memungkinkan fleksibilitas dalam gaya dan gaya dinamis.
Masih banyak lagi komponen yang diberi gaya, seperti animasi, dan React adalah kerangka besar yang harus dipelajari selain itu.
