Dalam tutorial ini, kita akan menjelajahi cara menggunakan komponen bergaya dalam aplikasi React untuk membuat gaya modular, dapat digunakan kembali, dan dinamis. Kita akan mulai dengan dasar-dasar penginstalan dan penggunaan styled-componentspaket, lalu beralih ke pembuatan komponen bergaya kustom dengan gaya dinamis.

Prasyarat

Sebelum kita mulai, pastikan Anda telah menginstal yang berikut ini di sistem Anda:

• Node.js dan npm (atau benang)
• Editor kode (misalnya VS Code, Sublime Text)

Pertama, mari instal styled-componentspaket dengan menjalankan perintah berikut di terminal Anda:

npm install styled-components

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

const StyledButton = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <StyledButton>Click me</StyledButton>
    </div>
  );
}

export default App;

Menciptakan gaya dinamis dengan alat peraga

Salah satu manfaat menggunakan styled-componentsadalah kemampuan untuk membuat gaya dinamis berdasarkan alat peraga. Mari kita modifikasi StyledButtonkomponen kita agar memiliki warna latar belakang yang berbeda berdasarkan sebuah primaryprop.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E6E6E6'};
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

<StyledButton>Default button</StyledButton>
<StyledButton primary>Primary button</StyledButton>

Manfaat lain menggunakan styled-componentsadalah kemampuan untuk membuat komponen gaya yang dapat digunakan kembali. Mari buat Cardkomponen bergaya kustom yang dapat digunakan kembali di seluruh aplikasi kita.

const Card = styled.div`
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: 3px;
`;

<Card>
  <h2>Card title</h2>
  <p>Card content</p>
</Card>

styled-componentsmemberikan cara yang kuat dan fleksibel untuk mendesain komponen React Anda. Mereka menawarkan beberapa manfaat, termasuk modularitas, gaya cakupan, gaya dinamis, dan keterbacaan yang lebih baik. Dalam tutorial ini, kita telah menjelajahi dasar-dasar penggunaan styled-components, membuat gaya dinamis dengan properti, dan membuat komponen gaya yang dapat digunakan kembali. Dengan pengetahuan ini, Anda dapat mulai menggunakan styled-componentsaplikasi React Anda sendiri dan memanfaatkan manfaatnya.