Styling Komponen React

Styling Komponen React | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

Contoh:

File Tombol.css:

css

.tombol-primer {
  background-color: dodgerblue;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
 
.tombol-primer:hover {
  background-color: royalblue;
}

File Tombol.jsx:

jsx

import React from 'react';
import './Tombol.css'; // Impor CSS khusus buat komponen ini (atau style global)
 
function Tombol({ teks }) {
  return (
    <button className="tombol-primer"> {/* Pake class dari Tombol.css */}
      {teks}
    </button

Cara Kerja:
1. Kamu bikin file CSS dengan nama khusus, biasanya NamaKomponen.module.css (misal, Tombol.module.css).
2. Kamu tulis aturan CSS di situ pake nama class biasa (misal, .primer).
3. Pas kamu impor file .module.css itu ke komponen JavaScript-mu, React (atau build tool-nya) bakal otomatis ngubah nama class-mu jadi unik secara global di belakang layar (misal, .primer bisa jadi Tombol_primer__a1b2c).
4. Di komponen, kamu akses nama class yang udah di-generate itu lewat objek yang diimpor.

Contoh: (Setup Vite biasanya udah ngedukung CSS Modules secara default buat file dengan akhiran .module.css)

File Tombol.module.css:

css

/* Nama class .primer ini cuma lokal buat Tombol.module.css */
.primer {
  background-color: mediumseagreen;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
}
 
.primer:hover {
  background-color: seagreen;
}

File Tombol.jsx:

jsx

import React from 'react';
import styles from './Tombol.module.css'; // Impor sebagai objek 'styles'
 
function Tombol({ teks }) {
  return (
    <button className={styles.primer}> {/* Akses class lewat styles.namaClass */}
      {teks}

Kelebihan:
- Scoped Locally: Style-nya cuma berlaku buat komponen tempat dia diimpor. Gak bakal bentrok sama class dari komponen lain.
- Kamu tetep bisa nulis CSS biasa.
Kekurangan:
- Nama class jadi agak panjang dan gak bisa ditebak di browser (tapi ini emang tujuannya biar unik).
- Berbagi style antar komponen yang beda mungkin butuh sedikit trik (misal, pake :global atau komposisi class).

Cara Kerja (Konsep Umum, contoh pake Styled-Components):
1. Instal library-nya (misal, npm install styled-components).
2. Impor library itu ke komponenmu.
3. Kamu bikin "komponen yang udah di-style" pake sintaks template literal JavaScript.

Contoh (pake Styled-Components):

File TombolGaya.jsx:

jsx

import React from 'react';
import styled from 'styled-components'; // Impor library
 
// Bikin komponen <Button> yang udah punya style sendiri
const StyledButton = styled.button` 
  background-color: ${props => props.warnaPrimer ? 'rebeccapurple' : 'lightgray'}; /* Bisa pake props! */
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  margin: 5px;
 
  &:hover { /* Pseudo-class bisa ditulis langsung */
    opacity: 0.8;
  }
 
  /* Bisa juga nambahin style berdasarkan prop lain */
  ${props => props.outline && `
    background-color: transparent;
    color: ${props.warnaPrimer ? 'rebeccapurple' : '#333'};
    border: 2px solid ${props.warnaPrimer ? 'rebeccapurple' : '#333'};
  `}
`;
 
function TombolGaya() {
  return (
    <div>
      <StyledButton warnaPrimer>Tombol Primer</StyledButton>
      <StyledButton>Tombol Biasa</StyledButton>
      <StyledButton warnaPrimer outline>Tombol Outline Primer</StyledButton>
    </div>
  );
}
// Di sini, StyledButton itu komponen React yang udah "nempel" sama style-nya.
 
export default TombolGaya;

Kelebihan:
- Scoped Secara Alami: Style nempel langsung ke komponen, jadi gak ada isu global scope.
- Styling Dinamis Berdasarkan Props: Gampang banget ngubah style berdasarkan props yang diterima komponen.
- JavaScript Power: Kamu bisa pake logika JavaScript (variabel, fungsi) buat nentuin style.
- Gak perlu mikirin nama class.
Kekurangan:
- Learning Curve Baru: Perlu belajar sintaks library-nya.
- Potensi Performa (dulu): Beberapa library CSS-in-JS versi lama kadang punya overhead performa, tapi yang modern udah makin canggih.
- CSS jadi bagian dari bundle JavaScript: Bisa bikin ukuran bundle JS nambah.
Library Populer: Styled-Components, Emotion.

Cara Kerja:
1. Setup Tailwind CSS di proyek React-mu (biasanya pake PostCSS di vite.config.js atau postcss.config.js). (Ini bakal kita bahas detail kalau bikin panduan Tailwind + React terpisah ya).
2. Kamu tinggal ngerangkai utility class Tailwind langsung di atribut className elemen JSX-mu.

Contoh:

jsx

import React from 'react';
// Gak perlu impor file CSS spesifik buat komponen ini kalau semua pake Tailwind
 
function TombolTailwind({ teks, primer }) {
  const kelasDasar = "font-semibold py-2 px-4 rounded-lg shadow focus:outline-none transition-all duration-150";
  const kelasPrimer = "bg-teal-500 hover:bg-teal-600 text-white focus:ring-2 focus:ring-teal-400 active:bg-teal-700";
  const kelasSekunder = "bg-gray-200 hover:bg-gray-300 text-gray-800 border border-gray-300 focus:ring-2 focus:ring-gray-400 active:bg-gray-400";
 
  return (
    <button className={`${kelasDasar} ${primer ? kelasPrimer : kelasSekunder}`}>
      {teks}
    </button>
  );
}
 
function App() {
    return (
        <div>
            <TombolTailwind teks="Aksi Utama" primer />
            <TombolTailwind teks="Info Lain" />
        </div>
    )
}
 
export default App;

Di sini, kita bahkan bisa bikin logika buat milih set class Tailwind mana yang mau dipake berdasarkan prop primer.

Kelebihan:
- Semua kelebihan Tailwind (development cepet, desain konsisten, gak pusing nama class, file CSS kecil di produksi).
- Sangat nyambung sama cara React mecah UI jadi komponen kecil-kecil. Kamu bisa bikin "komponen visual" yang sangat spesifik cuma dengan ngatur class Tailwind-nya.
Kekurangan:
- HTML (JSX) bisa jadi "rame" banget sama class (tapi ini emang ciri khas Tailwind).
- Butuh pemahaman yang baik soal utility class Tailwind.

Dandanan Komponen React: Dari CSS Klasik Sampe Jurus Modern!

1. CSS Biasa (Global CSS) - Cara Klasik yang Masih Oke

2. CSS Modules - Styling Lokal, Anti Bentrok!

3. CSS-in-JS (Styled-Components, Emotion, dll.) - Styling Langsung di JavaScript!

4. Tailwind CSS dengan React - Utility-First di Komponen!

Mana yang Dipilih?

Kuis Styling Komponen React

Diskusi Pelajaran