• Inline Style
• File CSS Eksternal
• CSS Modules
• Menggunakan Library Styling
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Custom Hooks, bagaimana membuat hook buatan sendiri untuk menyederhanakan logika yang bisa digunakan kembali di banyak component.

Pada artikel kali ini, kita akan membahas tentang Styles di React. Styling adalah hal penting karena menentukan tampilan aplikasi kita.

Ada beberapa cara yang bisa digunakan untuk memberikan style pada component React, mulai dari inline style, CSS biasa, hingga CSS Modules atau library CSS-in-JS.

Inline Style

React memungkinkan kita menambahkan style langsung ke elemen dengan atribut style.

function App() {
  return (
    <div>
      <h1 style={{ color: "blue", fontSize: "24px" }}>
        Halo, ini teks berwarna biru
      </h1>
    </div>
  );
}

export default App;

Penjelasan:

• style menerima object JavaScript.
• Nama properti CSS menggunakan camelCase (fontSize bukan font-size).

File CSS Eksternal

Kita juga bisa menulis style di file .css terpisah, lalu mengimpornya.

Silahkan teman-teman buat file App.css:

.title {
  color: red;
  font-size: 28px;
  text-align: center;
}

Lalu gunakan di App.jsx:

import "./App.css";

function App() {
  return <h1 className="title">Halo, ini teks berwarna merah</h1>;
}

export default App;

Penjelasan:

• Kita membuat class CSS di App.css.
• Digunakan di JSX dengan atribut className.

CSS Modules

Agar style lebih terisolasi (tidak bentrok antar component), kita bisa menggunakan CSS Modules.

Silahkan teman-teman buat file App.module.css:

.title {
  color: green;
  font-weight: bold;
}

Lalu gunakan di App.jsx:

import styles from "./App.module.css";

function App() {
  return <h1 className={styles.title}>Halo, ini teks berwarna hijau</h1>;
}

export default App;

Penjelasan:

• CSS Modules memberi nama unik otomatis untuk tiap class.
• Mencegah konflik dengan style di file lain.

Menggunakan Library Styling

Selain CSS bawaan, banyak developer React juga memakai library pihak ketiga:

• Tailwind CSS → utility-first CSS framework, sangat populer di React.
• Styled Components → CSS-in-JS, menulis style langsung di file JavaScript.
• Chakra UI / Material UI → library UI dengan komponen siap pakai.

Contoh dengan Styled Components:

npm install styled-components

Lalu gunakan:

import styled from "styled-components";

const Title = styled.h1`
  color: purple;
  text-decoration: underline;
`;

function App() {
  return <Title>Halo, ini teks berwarna ungu</Title>;
}

export default App;

Kesimpulan

Pada artikel ini, kita sudah belajar berbagai cara menambahkan Styles di React:

• Inline style dengan object JavaScript.
• File CSS eksternal dengan className.
• CSS Modules untuk style yang lebih terisolasi.
• Library populer seperti Tailwind CSS atau Styled Components untuk pengembangan lebih cepat.

Dengan memahami berbagai opsi styling, kita bisa memilih pendekatan yang sesuai dengan kebutuhan proyek.

Di artikel berikutnya, kita akan membahas tentang Class dan Dynamic Class di React, bagaimana cara mengatur class secara dinamis menggunakan kondisi atau state.

Terima kasih