Cara menulis CSS di React

Menulis CSS di React dapat dilakukan dengan beberapa pendekatan berbeda. Berikut adalah beberapa metode umum untuk menulis dan mengelola CSS dalam aplikasi React:

1. CSS Tradisional

Menulis CSS seperti biasa di file .css dan mengimpornya ke dalam komponen React.

Contoh:

File CSS: App.css

.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  color: #333;
  font-size: 24px;
}

File React Component: App.js

import React from 'react';
import './App.css'; // Mengimpor file CSS

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

export default App;

2. CSS Modules

Menggunakan CSS Modules untuk scoped styling. Ini memastikan bahwa gaya hanya berlaku untuk komponen tertentu dan tidak ada konflik dengan gaya lain.

Contoh:

File CSS Module: App.module.css

.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  color: #333;
  font-size: 24px;
}

File React Component: App.js

import React from 'react';
import styles from './App.module.css'; // Mengimpor CSS Module

function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World</h1>
    </div>
  );
}

export default App;

3. Styled-Components

Menggunakan pustaka styled-components untuk menulis CSS dalam JavaScript dengan sintaks template literal.

Contoh:

Instalasi:

npm install styled-components

File React Component: App.js

import React from 'react';
import styled from 'styled-components';

// Mendefinisikan styled component
const Container = styled.div`
  padding: 20px;
  background-color: #f0f0f0;
`;

const Title = styled.h1`
  color: #333;
  font-size: 24px;
`;

function App() {
  return (
    <Container>
      <Title>Hello World</Title>
    </Container>
  );
}

export default App;

4. Emotion

Menggunakan pustaka emotion untuk CSS-in-JS dengan sintaks serupa.

Contoh:

Instalasi:

npm install @emotion/react @emotion/styled

File React Component: App.js

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

// Mendefinisikan gaya dengan css template literal
const containerStyle = css`
  padding: 20px;
  background-color: #f0f0f0;
`;

const Title = styled.h1`
  color: #333;
  font-size: 24px;
`;

function App() {
  return (
    <div css={containerStyle}>
      <Title>Hello World</Title>
    </div>
  );
}

export default App;

5. Inline Styles

Menulis gaya langsung di dalam JSX menggunakan atribut style. Ini tidak mendukung semua fitur CSS (seperti pseudo-classes dan media queries) tetapi bisa digunakan untuk gaya sederhana.

Contoh:

File React Component: App.js

import React from 'react';

function App() {
  // Mendefinisikan gaya sebagai objek JavaScript
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0',
  };

  const titleStyle = {
    color: '#333',
    fontSize: '24px',
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello World</h1>
    </div>
  );
}

export default App;

Penjelasan

1. CSS Tradisional:

   • Mengimpor file CSS ke dalam komponen.

   • Gaya diterapkan ke elemen berdasarkan class name.

2. CSS Modules:

   • Menggunakan file CSS terpisah dengan class names scoped untuk setiap komponen.

   • Menghindari konflik nama dengan memberikan class names unik.

3. Styled-Components:

   • Menulis CSS dalam JavaScript dengan template literals.

   • Gaya didefinisikan sebagai komponen yang dapat digunakan seperti komponen React lainnya.

4. Emotion:

   • Mendukung gaya dengan template literals dan CSS-in-JS.

   • Menyediakan dua cara untuk mendefinisikan gaya: menggunakan css atau styled.

5. Inline Styles:

   • Mendefinisikan gaya sebagai objek JavaScript langsung di JSX.

   • Cocok untuk gaya dinamis dan sederhana tetapi tidak mendukung fitur CSS lebih lanjut.

Sumber

• React Documentation - CSS

• Styled-Components Documentation

• Emotion Documentation

• CSS Modules Documentation