Styled Components atau Emotion Untuk CSS-in-JS

Styled Components  dan  Emotion adalah dua pustaka populer untuk menerapkan gaya (CSS) langsung dalam JavaScript menggunakan pendekatan **CSS-in-JS**. Keduanya membantu Anda membuat komponen yang terpisah dan terstruktur, sehingga gaya setiap komponen menjadi lebih modular dan mudah dikelola. Berikut adalah penjelasan lengkap tentang kedua pustaka ini.

### **1. Styled Components**

Styled Components memungkinkan Anda untuk menulis CSS langsung di dalam file JavaScript dengan mengubah komponen menjadi komponen bergaya (styled components). Styled Components juga mendukung gaya dinamis berdasarkan props, yang memungkinkan gaya komponen yang fleksibel.

#### **Instalasi**
Jalankan perintah ini untuk menginstal Styled Components:

```bash
npm install styled-components

#### **Penggunaan Dasar**

Styled Components memungkinkan kita membuat komponen dengan gaya terpisah:

```javascript
import styled from 'styled-components';

// Membuat komponen dengan gaya
const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #45a049;
  }
`;

function App() {
  return <Button>Click Me</Button>;
}

#### **Styled Components dengan Props**
Styled Components memungkinkan penggunaan **props** untuk gaya dinamis:

```javascript
const Button = styled.button`
  background-color: ${props => (props.primary ? '#4CAF50' : 'white')};
  color: ${props => (props.primary ? 'white' : '#4CAF50')};
  padding: 10px 20px;
  border: 2px solid #4CAF50;
  border-radius: 5px;
  cursor: pointer;
`;

function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </>
  );
}

### **2. Emotion**

Emotion adalah pustaka CSS-in-JS yang sangat cepat dan fleksibel. Sama seperti Styled Components, Emotion memungkinkan Anda menulis gaya langsung di dalam file JavaScript. Salah satu keunggulan Emotion adalah performanya yang cepat dan mendukung **styled** dan **css** dari pustaka itu sendiri.

#### **Instalasi**
Untuk menginstal Emotion, gunakan perintah berikut:

```bash
npm install @emotion/react @emotion/styled

#### **Penggunaan Dasar dengan Styled**
Anda dapat menggunakan **@emotion/styled** untuk membuat komponen bergaya dengan sintaks yang mirip dengan Styled Components.

```javascript
import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

function App() {
  return <Button>Click Me</Button>;
}
#### **Penggunaan `css` untuk Gaya Lokal**
Emotion juga menyediakan fungsi **css** untuk menambahkan gaya langsung di dalam komponen tanpa membuat komponen bergaya:

```javascript
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

function App() {
  return <button css={buttonStyle}>Click Me</button>;
}

### **Styled Components vs. Emotion**
- **Styled Components**: Lebih populer dan memiliki komunitas yang besar. Mudah digunakan dan fleksibel dengan gaya dinamis berbasis props.
- **Emotion**: Lebih cepat dan fleksibel, cocok untuk proyek besar yang membutuhkan performa tinggi. Memiliki fitur tambahan seperti `css` yang memungkinkan gaya lokal.

Dengan memahami Styled Components dan Emotion, Anda bisa membuat antarmuka yang lebih modular dan efisien. Jika ada contoh atau implementasi lebih lanjut yang ingin Anda coba.