Cara Menambahkan CSS di React
1. Latar Belakang
Dalam pengembangan aplikasi web tradisional, kita terbiasa memisahkan HTML, JavaScript, dan CSS ke dalam file yang berbeda. Namun, React memperkenalkan paradigma berbasis komponen (component-based). Artinya, struktur, logika, dan bahkan tampilan (desain visual) sering kali disatukan dalam satu entitas yang sama.
Untuk mencapai tampilan visua yang estetik, terutama ketika Anda sedang merancang elemen antarmuka yang kompleks seperti dashboard widget atau kartu profil, react memberikan beberapa fleksibilitas.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
- Node js (untuk runtime JS)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
Ada beberapa cara untuk menambahkan CSS di React:
1. Inline Styling (Gaya Langsung di Elemen)
Inline Styling adalah cara paling cepat dan sederhana untuk memberikan gaya. Berbeda dengan HTML biasa yang menggunakan string (misal: style="color: red;"), React membutuhkan objek JavaScript. Contoh Penggunaan:
export default function ServerStatusCard() {
const cardStyle = {
backgroundColor: '#1e1e1e',
color: '#ffffff',
padding: '20px',
borderRadius: '12px',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
};
const statusDot = {
height: '12px',
width: '12px',
backgroundColor: '#4ade80', // Warna hijau
borderRadius: '50%',
display: 'inline-block',
marginRight: '8px'
};
return (
<div style={cardStyle}>
<h3>Server Alpha</h3>
<p><span style={statusDot}></span> Online</p>
</div>
);
}
- Kelebihan: Sangat cepat untuk prototyping atau mengaplikasikan gaya dinamis berdasarkan state.
- Kekurangan: Tidak mendukung pseudo-classes (seperti :hover atau :focus) dan media queries untuk responsivitas.
2. CSS Stylesheet Biasa & CSS Modules
Anda tetap bisa menggunakan file .css tradisional dan mengimpornya ke dalam komponen. Namun, mengimpor CSS biasa dapat menyebabkan "bocornya" gaya ke komponen lain (global scope conflict). Solusi terbaiknya adalah menggunakan CSS Modules. Dengan menambahkan .module.css pada nama file, React akan menghasilkan nama class yang unik secara otomatis saat aplikasi di-build, sehingga gaya tersebut terisolasi hanya untuk komponen yang mengimpornya.
File StatusCard.module.css:
.card {
background-color: #f8fafc;
padding: 20px;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.title {
color: #0f172a;
font-weight: bold;
}
File Komponen StatusCard.jsx:
import styles from './StatusCard.module.css';
export default function StatusCard() {
return (
<div className={styles.card}>
<h3 className={styles.title}>Traffic Pengunjung</h3>
<p>1,245 Active Users</p>
</div>
);
}
- Kelebihan: Mencegah bentrok nama class dan menjaga kode CSS tetap bersih di file terpisah.
- Kekurangan: Perlu berpindah-pindah antara file .jsx dan .css saat debugging.
3. CSS-in-JS (Contoh: Styled Components)
CSS-in-JS adalah sebuah pola (pattern) atau teknik pengembangan web di mana penulisan dan pengelolaan kode CSS dilakukan langsung di dalam file JavaScript (atau TypeScript), alih-alih memisahkannya ke dalam file .css tradisional.
Contoh Penggunaan:
import styled from 'styled-components';
// Membuat komponen baru yang sudah memiliki gaya
const CardContainer = styled.div`
background-color: white;
padding: 20px;
border-radius: 8px;
border-top: 4px solid ${props => props.isWarning ? '#f59e0b' : '#3b82f6'};
transition: transform 0.2s ease-in-out;
&:hover {
transform: translateY(-5px);
}
`;
export default function MetricCard({ title, value, isWarning }) {
return (
<CardContainer isWarning={isWarning}>
<h4>{title}</h4>
<h2>{value}</h2>
</CardContainer>
);
}
- Kelebihan: Sangat mudah mengontrol visual menggunakan props React dan memiliki dukungan penuh untuk fungsionalitas CSS tingkat lanjut.
- Kekurangan: Menambah dependensi baru pada proyek dan bisa sedikit menurunkan performa render awal jika tidak dikonfigurasi dengan baik.
4. Utility-First Framework (Contoh: Tailwind CSS)
Jika Anda ingin membangun antarmuka dengan sangat cepat tanpa harus memikirkan penamaan class atau berpindah file, Tailwind CSS adalah solusi terbaik. Anda cukup menambahkan nama class yang sudah disediakan (seperti flex, p-4, text-center) langsung ke dalam properti className.
Contoh Penggunaan:
export default function ApiEndpointCard() {
return (
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-gray-800">Endpoint /api/users</h3>
<span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">
200 OK
</span>
</div>
<p className="text-gray-500 text-sm">Response time: 45ms</p>
</div>
);
}
- Kelebihan: Mempercepat proses development, membuat ukuran file CSS menjadi sangat kecil di tahap produksi, dan menjaga konsistensi desain sistem.
- Kekurangan: Kode HTML/JSX bisa terlihat sangat panjang dan berantakan (cluttered) jika elemen memiliki terlalu banyak styling.
4. Daftar Pustaka
SantriKoding. (2026). Belajar React Dasar #15: Styles. https://santrikoding.com/belajar-react-dasar-15-stylesSantriKoding. (2026). Belajar React Dasar #16: Class dan Dynamic Class. https://santrikoding.com/belajar-react-dasar-16-class-dan-dynamic-class
AK Studio. (2020). Mengenal props dan styling pada component ReactJS. https://www.akscoding.com/2020/11/Mengenal-Props-dan-Styling-Pada-Component-Reactjs.html
Iltek Komputer. (2023). Styling dengan CSS dan Tailwind di ReactJS. https://www.iltekkomputer.com/styling-dengan-css-dan-tailwind-di-reactjs/
0 Komentar