Pustaka Emotion menyederhanakan penggunaan CSS Anda di React dan juga menambahkan beberapa fitur sintaks praktis.

Menata gaya aplikasi React dapat menjadi tantangan, terutama jika Anda ingin gaya Anda tetap teratur dan dapat dipelihara. Untuk membantu menyederhanakan proses ini, pustaka Emotion menyediakan abstraksi tingkat tinggi di atas CSS.

Apa itu Emosi?

Emotion adalah pustaka untuk menata aplikasi React yang menyediakan cara sederhana dan efisien untuk mengelola gaya Anda. Ini memungkinkan Anda untuk menulis CSS dalam JavaScript dan menyediakan API yang fleksibel untuk menata komponen Anda.

Salah satu manfaat utama menggunakan Emotion untuk mengatur gaya aplikasi React Anda adalah menyediakan cara yang lebih efisien untuk mengelola gaya Anda. Misalnya, Anda dapat menggunakan nama kelas yang identik di beberapa komponen tanpa risiko penamaan yang muncul saat bekerja dengan CSS/SASS.

Pustaka Emotion menerapkan gaya Anda hanya ke komponen yang menggunakannya, bukan ke seluruh halaman. Ini dapat membantu Anda menghindari konflik dengan gaya lain pada halaman dan membuat kode Anda lebih modular dan dapat digunakan kembali.

instagram viewer

Cara Memasang Emosi

Untuk menambahkan pustaka Emotion ke aplikasi React Anda, jalankan perintah terminal berikut:

npm install --save @emotion/react

Pustaka Emotion sekarang sudah terinstal di proyek Anda dan siap digunakan untuk mengatur gaya aplikasi React Anda.

Styling Menggunakan Prop css Emosi

Setelah Anda menginstal pustaka Emosi, Anda akan dapat menggunakan css prop untuk mendesain aplikasi React Anda. Itu css prop mirip dengan prop gaya karena Anda dapat meneruskan gaya padanya dalam bentuk string atau objek JavaScript biasa.

Untuk menata aplikasi Anda menggunakan css prop, Anda harus mengimpornya dari @emosi/reaksi pustaka, lalu tentukan gaya Anda:

/** @jsxImportSource @emosi/reaksi */
impor Reaksi dari'reaksi';
impor {css} dari'@emosi/reaksi';
fungsiAplikasi() {
kembali (
 lapisan: 0.5rem 1rem;
 perbatasan: tidak ada;
 font-family: kursif;
 radius batas: 12px;
 warna: #333333;
 background-color: mewarisi;
 margin-blok-mulai: 2rem;
 margin-blok-akhir: 2rem;
`}>
 Klik Saya
 </button>
 )
}


eksporbawaan Aplikasi;

Baris kode pertama, /** @jsxImportSource @emotion/react */, adalah komentar tertentu yang harus Anda tambahkan ke file JSX untuk menunjukkan bahwa pustaka Emotion harus digunakan sebagai pragma JSX untuk file tersebut.

Di JSX, pragma adalah fungsi yang mengubah sintaks JSX menjadi JavaScript biasa. Secara default, React menggunakan React.createElement berfungsi sebagai pragma JSX. Namun, dengan @jsxImportSource komentar, Anda dapat menentukan pragma yang berbeda.

Dalam hal ini, @emosi/reaksi pragma memberitahu JSX untuk menggunakan jsx fungsi dari perpustakaan Emotion untuk mengubah kode JSX. Dengan menambahkan komentar pragma ke file JSX, Anda dapat menggunakan fitur CSS-in-JS library Emotion di komponen Anda.

Komponen tombol merender tombol dengan gaya khusus. Di sini, css prop menambahkan gaya khusus ke elemen tombol.

Itu css prop juga mendukung gaya bersarang. Penataan gaya bersarang memungkinkan Anda menulis gaya yang bersarang satu sama lain.

Misalnya:

/** @jsxImportSource @emosi/reaksi */
impor Reaksi dari'reaksi';
impor {css} dari'@emosi/reaksi';
fungsiAplikasi() {
kembali (
 lapisan: 0.5rem 1rem;
 perbatasan: tidak ada;
 font-family: kursif;
 radius batas: 12px;
 warna: #333333;
 background-color: mewarisi;
 margin-blok-mulai: 2rem;
 margin-blok-akhir: 2rem;


 &:arahkan{
 warna: #e2e2e2;
 warna latar belakang: #333333;
 }
`}>
 Klik Saya
 </button>
 )
}
eksporbawaan Aplikasi;

Dalam contoh ini, deklarasi gaya hover menggunakan fitur gaya bersarang dari css menopang. Latar belakang dan warna font pada blok kode di atas akan berubah setiap kali Anda mengarahkan kursor ke tombol.

Melewati Gaya Objek ke Prop css

Itu css prop juga menerima gaya objek JavaScript biasa. Saat menata beberapa komponen, memanfaatkan gaya objek memungkinkan Anda menggunakan kembali gaya di komponen Anda.

Untuk meneruskan gaya objek ke css prop, tentukan gaya sebagai objek JavaScript dan teruskan ke prop:

const gaya = {
 lapisan: '0,5 rem 1 rem',
 berbatasan: 'tidak ada',
 keluarga font: 'kursif',
 perbatasanRadius: '12px',
 warna: '#333333',
 warna latar belakang: 'mewarisi',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&: arahkan': {
 warna: '#e2e2e2',
 warna latar belakang: '#333333',
 }
}
kembali (
"aplikasi">

Perhatikan bahwa nama properti CSS adalah camelCase, bukan ditulis dgn tanda penghubung. Ini karena gaya didefinisikan sebagai objek JavaScript, yang menggunakan konvensi penamaan camelCase.

Menata Gaya Menggunakan Komponen Bergaya

Pustaka Emotion juga memanfaatkan komponen yang diberi gaya saat menata gaya aplikasi React. Menggunakan komponen bergaya mirip dengan komponen React, selain dari fakta bahwa mereka mengandung gaya di luar kotak. Untuk membuat komponen bergaya, Anda akan menggunakan bergaya fungsi.

Itu bergaya fungsi memungkinkan Anda membuat komponen bergaya yang dapat digunakan kembali. Untuk menggunakan bergaya fungsi, impor dari emosi / gaya perpustakaan.

Untuk mendapatkan @emosi/gaya perpustakaan di aplikasi Anda, Anda akan menginstalnya ke dalam proyek Anda. Anda dapat melakukannya dengan menjalankan perintah berikut di terminal proyek Anda:

npm instal @emotion/styled

Setelah menginstal @emosi/gaya perpustakaan, impor bergaya berfungsi dan tentukan gaya Anda:

impor bergaya dari"@emosi/gaya";
const Tombol = ditata.tombol({
 lapisan: '0,5 rem 1 rem',
 berbatasan: 'tidak ada',
 keluarga font: 'kursif',
 perbatasanRadius: '12px',
 warna: '#333333',
 warna latar belakang: 'mewarisi',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',


'&: arahkan': {
 warna: '#e2e2e2',
 warna latar belakang: '#333333',
 }
})
eksporbawaan Tombol;

Di blok kode di atas, sebuah komponen ditata Tombol dibuat. Anda dapat menggunakan Tombol ini di aplikasi React Anda seperti komponen React lainnya.

Seperti itu:

impor Reaksi dari'reaksi';
impor Tombol dari'./Tombol';
fungsiAplikasi() {
kembali (








eksporbawaan Aplikasi;

Rendering Aplikasi komponen akan menampilkan tombol dengan gaya yang ditentukan dalam Tombol komponen di layar Anda.

Itu bergaya function juga menerima gaya string. Ini terlihat berbeda dari pendekatan gaya objek tetapi fungsinya serupa.

impor bergaya dari"@emosi/gaya";
const Tombol = ditata.tombol`
 lapisan: 0.5rem 1rem;
 perbatasan: tidak ada;
 font-family: kursif;
 radius batas: 12px;
 warna: #333333;
 background-color: mewarisi;
 margin-blok-mulai: 2rem;
 margin-blok-akhir: 2rem;


 &: arahkan {
 warna: #e2e2e2;
 warna latar belakang: #333333;
 }
`
eksporbawaan Tombol;

Styling Efisien Dengan Emosi

Emotion adalah perpustakaan yang kuat untuk menata komponen React yang menyediakan cara sederhana dan efisien untuk mengelola gaya Anda. Apakah Anda seorang pemula atau pengembang berpengalaman, Emotion dapat membantu menyederhanakan proses penataan gaya aplikasi React Anda dan membuatnya lebih mudah untuk memelihara dan menskalakan kode Anda.

Jadi, jika Anda mencari cara yang lebih efisien dan fleksibel untuk mendesain komponen React Anda, pertimbangkan Emotion.