Styling komponen React dengan Emotion

Anda ingin mengelola Styling dari komponen React secara modern dan efisien? Dengan pustaka Emotion, Anda dapat mengintegrasikan CSS langsung ke dalam komponen React Anda untuk merancang antarmuka pengguna dengan efektif. Dalam panduan ini, saya akan menjelaskan dasar-dasar styling dengan Emotion, bagaimana menginstal dan mengaplikasikan pustaka tersebut, serta memberikan beberapa tips yang berguna.

Temuan Utama

• Emotion memungkinkan penulisan CSS dalam JavaScript dan menyediakan cara penggunaan yang intuitif.
• Dengan Emotion, Anda dapat menggunakan berbagai teknik styling, termasuk Template Literals dan penggunaan css-Props.
• Manajemen gaya lebih modular dengan penggunaan Emotion meningkatkan keterbacaan dan kemungkinan penggunaan kembali.

Panduan Langkah Demi Langkah

1. Menginstal Emotion

Pertama, Anda harus menginstal Emotion dalam proyek Anda. Buka Terminal dan navigasikan ke direktori proyek Anda. Di sini Anda dapat menjalankan perintah berikut untuk menginstal pustaka emotion:

npm install @emotion/react @emotion/styled

2. Mengimpor CSS

Pada file App.jsx Anda, Anda dapat menggunakan Emotion. Anda harus mengimpor Emotion untuk menggunakan fungsi css serta mengimpor elemen styled. Tambahkan berikut di awal file Anda:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Styling dengan Template Literals

Gunakan fungsi css dari Emotion untuk membuat variabel CSS. Tentukan konvensi CSS menggunakan Template Literals. Berikut contoh cara Anda dapat menulis kelas Wrapper untuk aplikasi Anda:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px;
`;

Kode ini memanfaatkan flexbox untuk memastikan tata letak yang sesuai.

4. Mengaplikasikan Gaya

Untuk menerapkan gaya yang telah ditentukan, berikan variabel appStyle tersebut ke dalam prop className elemen HTML utama Anda. Berikut cara melakukannya:

function App() { return <div css={appStyle}>Hallo Welt!</div>;
}

5. Menggunakan Komponen Berkas Gaya

Selain menggunakan variabel css, Anda juga dapat menggunakan Styled-Components dengan Emotion. Untuk membuat komponen bergaya, Anda bisa menggunakan kode berikut:

const Container = styled.div` padding: 20px; background-color: lightblue;
`;

Dengan ini, Container menjadi komponen baru berbasis CSS dengan semua gaya yang telah ditentukan.

6. Menambahkan Pertanyaan Media

Emotion memudahkan integrasi pertanyaan media dalam CSS Anda. Cukup tambahkan ke dalam Template Literal:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; }
`;

Pertanyaan media ini mengubah ukuran teks saat lebar tampilan kurang dari 600 piksel.

7. Menetapkan Efek Hover

Anda juga dapat dengan mudah menetapkan efek Hover dalam templat CSS Anda:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Aturan CSS ini mengubah warna latar belakang elemen saat dihover dengan mouse.

8. Menggabungkan Gaya yang Lebih Kompleks

Emotion memungkinkan penggabungan beberapa nama kelas. Ini dapat dilakukan dengan fungsi cx:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

Dalam kasus ini, teks ditampilkan dalam warna biru dan merah.

9. Perluasan Masa Depan

Jika Anda mengelola proyek besar di masa depan, berguna untuk mengatur gaya Anda dalam berbagai modul. Anda bisa membuat commonStyles.js misalnya dan mengekspor gaya dasar Anda di sana:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Sekarang Anda dapat menyisipkan flexCenter ke dalam komponen lainnya.

10. Uji Coba dan Penyesuaian

Muat aplikasi Anda di browser dan periksa apakah gaya ditampilkan dengan benar. Bereksperimenlah dengan gaya yang berbeda dan lihat hasilnya secara real-time.

Ringkasan

Dengan kombinasi Emotion dan React, kini mungkin untuk membuat tata letak UI yang realistis. Emosi memungkinkan Anda mendefinisikan CSS secara langsung di JavaScript dan mengelolanya dengan efektif. Dengan demikian, Anda dapat memanfaatkan keuntungan dari kerapatan layar dan integrasi yang erat antara logika dan gaya.