Perhatikan: Property CSS ditulis dengan camelCase (contoh: font-size → fontSize).
Nilai style ditulis sebagai string atau angka (jika angka, otomatis satuan default-nya adalah px).
Contoh Penggunaan Inline Style
function App() {
return (
<div>
<h1 style={{ color: "green", fontSize: "24px" }}>
Belajar Inline Style di React
</h1>
<p style={{ textAlign: "center", fontStyle: "italic" }}>
Ini adalah contoh penggunaan inline style.
</p>
</div>
);
}
Inline Style dengan Variabel Object
Untuk membuat kode lebih rapi, style bisa disimpan di variabel JavaScript.
const titleStyle = {
color: "purple",
fontSize: "28px",
textAlign: "center",
};
function App() {
return <h1 style={titleStyle}>Hello dengan Object Style!</h1>;
}
Inline Style Dinamis
Inline style juga mendukung penggunaan kondisi.
function App() {
const isActive = true;
return (
<button
style={{
backgroundColor: isActive ? "blue" : "gray",
color: "white",
padding: "10px 20px",
border: "none",
borderRadius: "8px",
}}
>
{isActive ? "Aktif" : "Nonaktif"}
</button>
);
}
Kelebihan : Mudah digunakan untuk styling cepat, Cocok untuk style dinamis berdasarkan kondisi,
Tidak perlu file CSS terpisah.
Kekurangan : Sulit dikelola jika style semakin kompleks, Tidak mendukung pseudo-class
(:hover, :focus) atau media queries langsung, Membuat komponen terlihat berantakan jika style
terlalu banyak.
Inline style cocok digunakan untuk:
Prototype cepat atau project kecil.
Styling dinamis yang berubah sesuai state/props.
Style unik yang hanya dipakai sekali di sebuah komponen.
Namun, untuk proyek besar, sebaiknya gunakan CSS eksternal, CSS Modules, atau Tailwind CSS
agar lebih terstruktur.
Inline style di React adalah teknik styling langsung menggunakan object JavaScript. Metode
ini sangat praktis untuk kebutuhan sederhana atau styling dinamis, namun kurang efisien jika
digunakan dalam aplikasi besar yang kompleks.
Dengan memahami inline style, pemula dapat lebih cepat beradaptasi dengan cara kerja
React sebelum melangkah ke metode styling yang lebih canggih.
Metode ini menggunakan file .css
terpisah sehingga kode menjadi lebih rapi, terstruktur, dan mudah dikelola, terutama untuk
proyek yang semakin besar.
CSS Eksternal adalah file
CSS yang ditulis terpisah dari komponen, lalu diimpor ke dalam file
JavaScript/JSX.
Keuntungannya: Kode lebih bersih
(JSX hanya berisi struktur, CSS berisi gaya). Style bisa digunakan ulang di
banyak komponen, Mudah dikelola ketika aplikasi berkembang.
Cara Menggunakan CSS Eksternal di React
Buat file dengan ekstensi .css, misalnya App.css.
App.css
.title {
color: blue;
font-size: 28px;
text-align: center;
}
.description {
color: gray;
font-size: 16px;
text-align: justify;
}
Mengimpor File CSS ke Komponen
Setelah membuat file CSS, impor ke dalam file React dengan perintah import "./App.css";.
App.js
import "./App.css";
function App() {
return (
<div>
<h1 className="title">Belajar CSS Eksternal di React</h1>
<p className="description">
Styling dengan CSS eksternal membuat kode lebih rapi dan mudah dikelola.
</p>
</div>
);
}
export default App;
Perhatikan: di React kita menggunakan atribut className (bukan class) untuk memberikan style.
Styling di Banyak Komponen
Misalnya kita punya komponen Button.js:
Button.css
.button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}
.button:hover {
background-color: darkgreen;
}
Button.js
import "./Button.css";
function Button() {
return <button className="button">Klik Saya</button>;
}
export default Button;
Dengan cara ini, setiap komponen bisa punya file CSS masing-masing agar lebih terorganisir.
Kelebihan : Kode lebih terstruktur dan mudah dipelihara, Bisa menggunakan fitur CSS
penuh (pseudo-class :hover, media queries, dll), Style bisa digunakan ulang di berbagai komponen.
Kekurangan : Bisa
terjadi konflik class jika nama class sama di banyak komponen. Untuk proyek
besar, sulit melacak class mana yang dipakai oleh komponen tertentu.
Styling dengan CSS eksternal di React adalah cara yang paling umum dan mudah
dipahami pemula.
Dengan memisahkan file .css
dari komponen, kode menjadi lebih rapi, mudah dipelihara, dan mendukung fitur
CSS penuh.
Dalam membangun aplikasi React, styling adalah bagian penting untuk menciptakan tampilan
yang menarik. Setelah mengenal inline style dan CSS eksternal, ada dua pendekatan modern
yang sering digunakan untuk mengatasi masalah konflik class dan memudahkan pengelolaan style,
yaitu: CSS Modules, Styled Components
Keduanya memiliki kelebihan masing-masing dan cocok digunakan pada proyek
skala menengah hingga besar.
CSS Modules adalah fitur yang membuat setiap class CSS bersifat lokal
terhadap komponen yang mengimpornya. Artinya, class yang ditulis di satu file
CSS tidak akan bertabrakan dengan class lain di komponen berbeda.
Membuat File CSS Modules
File CSS Modules biasanya menggunakan ekstensi .module.css.
Button.module.css
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
Mengimpor dan Menggunakan di Komponen
Button.js
import styles from "./Button.module.css";
function Button() {
return <button className={styles.button}>Klik Saya</button>;
}
export default Button;
Perhatikan bahwa kita memanggil class dengan styles.button, bukan "button".
Kelebihan CSS Modules : Menghindari konflik class antar komponen, Kode lebih rapi
dan terorganisir, Masih tetap menggunakan sintaks CSS murni.
Kekurangan CSS Modules: Harus membuat file CSS tambahan untuk setiap komponen,
Kurang fleksibel untuk style yang sangat dinamis.
Styled Components
Styled Components adalah library populer di React yang menggunakan konsep CSS-in-JS.
Artinya, kita bisa menulis CSS langsung di file JavaScript dengan bantuan template
literals.
Styled Components membuat setiap komponen memiliki style yang unik tanpa
khawatir terjadi konflik.
Cara Menggunakan Styled Components
a. Instalasi Styled Components perlu diinstal terlebih dahulu:
npm install styled-components
b. Membuat Styled Components
Button.js
import styled from "styled-components";
const Button = styled.button`
background-color: #28a745;
color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
&:hover { background-color: #1e7e34;
};
function App() {
return <Button>Klik Saya</Button>;
}
export default App;
Styling Dinamis dengan Props
Styled Components juga mendukung style dinamis berdasarkan props.
import styled from "styled-components";
const Button = styled.button`
background-color: ${(props) => (props.primary ? "blue" : "gray")}; color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
`;
function App() {
return (
<div>
<Button primary>Button Utama</Button>
<Button>Button Sekunder</Button>
</div>
);
}
export default App;
Kelebihan Styled Components: Tidak ada konflik class, Mendukung style dinamis
(berdasarkan props/state), CSS ditulis langsung di dalam file komponen.
Kekurangan Styled Components : Perlu library tambahan, jika terlalu banyak styled components,
ukuran bundle bisa membesar.
Perbandingan CSS Modules vs Styled Components
CSS Modules cocok untuk kamu yang terbiasa dengan CSS murni dan ingin menjaga agar
style tidak bentrok antarkomponen.
Styled Components lebih cocok untuk kamu yang suka menulis CSS langsung di file
JavaScript dan membutuhkan style dinamis.
