March 31, 2023



Menggunakan React, biasanya menyimpan gaya Anda dalam file CSS global. Hal ini dapat mempersulit pencarian gaya untuk komponen tertentu, terutama saat Anda mengerjakan proyek besar. Dengan komponen yang diberi gaya, menemukan gaya untuk komponen tertentu menjadi mudah karena berada dalam file yang sama dengan komponen.


Mari kita lihat cara menyiapkan dan mengintegrasikan komponen bergaya di aplikasi React Anda.


Menginstal Perpustakaan komponen-gaya

Anda dapat menginstal komponen-gaya dengan menjalankan perintah ini di terminal Anda:

 npm i styled-components

Untuk menginstal komponen bergaya menggunakan benang, jalankan:

 yarn add styled-components

Membuat Komponen Bergaya

Komponen yang diberi gaya sama seperti komponen Bereaksi standar, dengan gaya. Ada berbagai pro dan kontra dari komponen bergayayang penting untuk dipertimbangkan untuk penggunaan yang benar.

Sintaks umum terlihat seperti ini:

 import styled from "styled-components";

const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`

Di sini Anda mengimpor bergaya dari gaya-komponen perpustakaan. Itu bergaya function adalah metode internal yang mengubah kode JavaScript menjadi CSS sebenarnya. Itu Nama komponen adalah nama komponen yang diberi gaya. Itu DOMElementTag adalah elemen HTML/JSX yang ingin Anda gaya, seperti div, span, tombol, dll.

Untuk membuat tombol bergaya menggunakan komponen bergaya, pertama-tama Anda harus membuat komponen React yang berisi elemen tombol.

Seperti itu:

 import React from "react";

function Button() {
    return (
        <button>Welcome!!!</button>
    )
}

Sekarang Anda dapat membuat gaya untuk tombol menggunakan komponen-gaya:

 import styled from "styled-components";

const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

Menyatukan semuanya, Anda harus mengganti tombol tag dengan StyledButton komponen:

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

const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}

Gaya Bersarang

Anda juga dapat menyusun gaya saat bekerja dengan komponen yang diberi gaya. Komponen bergaya bersarang agak mirip menggunakan Bahasa Ekstensi SASS/SCSS. Anda dapat menyusun gaya jika komponen berisi beberapa tag elemen dan ingin memberi gaya pada setiap tag satu per satu.

Misalnya:

 import React from 'react';

function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}

Kode ini membuat komponen yang berisi an h1 elemen dan a P elemen.

Anda dapat memberi gaya pada elemen ini menggunakan fitur gaya bersarang dari komponen yang diberi gaya:

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

const StyledApp = styled.div`
    color: #333333;
    text-align: center;

    h1 {
        font-size: 32px;
        font-style: italic;
        font-weight: bold;
        letter-spacing: 1.2rem;
        text-transform: uppercase;
    }

    p {
        margin-block-start: 1rem;
        font-size: 18px;
    }
`

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}

Kode ini menggunakan komponen yang diberi gaya dan menyarangkan gaya untuk h1 Dan P tag.

Membuat dan Menggunakan Variabel

Kemampuan untuk membuat variabel adalah fitur luar biasa dari pustaka komponen-gaya. Kemampuan ini memberikan gaya dinamis di mana Anda dapat menggunakan variabel JavaScript untuk menentukan gaya.

Untuk menggunakan variabel dalam komponen-gaya, buat variabel, dan berikan nilai properti CSS padanya. Anda kemudian dapat menggunakan variabel itu secara langsung di CSS Anda, misalnya:

 import styled from "styled-components";

const MainColor = "red";

const Heading = styled.h1`
    color: ${MainColor};
`;

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}

Di blok kode di atas, teks “Halo Dunia!” akan ditampilkan dalam warna merah.

Perhatikan bahwa contoh ini hanya menggunakan variabel JavaScript standar dalam literal template bersama dengan komponen yang diberi gaya. Ini pendekatan yang berbeda dari menggunakan variabel CSS.

Memperluas Gaya

Setelah membuat komponen bergaya, Anda akan menggunakan komponen tersebut. Anda mungkin ingin membuat perbedaan halus atau menambahkan lebih banyak gaya dalam beberapa situasi. Dalam kasus seperti ini, Anda dapat memperluas gaya.

Untuk memperluas gaya, Anda membungkus komponen yang diberi gaya di ditata() konstruktor, lalu sertakan gaya tambahan apa pun.

Dalam contoh ini, Tombol Utama komponen mewarisi gaya komponen Tombol dan menambahkan warna latar belakang biru yang berbeda.

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

const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

const PrimaryButton = styled(Button)`
    background-color: blue;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}

Anda juga dapat mengubah tag yang dirender oleh komponen bergaya menggunakan sebagai penyangga.

Itu sebagai prop memungkinkan Anda untuk menentukan elemen HTML/JSX yang mendasari yang akan dirender oleh komponen yang diberi gaya.

Misalnya:

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

const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}

Kode ini merender Tombol komponen sebagai A elemen, pengaturannya href atribut untuk ‘#’.

Membuat Gaya Global

Komponen yang diberi gaya biasanya dicakupkan ke sebuah komponen, jadi Anda mungkin bertanya-tanya bagaimana cara mengatur gaya aplikasi secara keseluruhan. Anda dapat mengatur gaya aplikasi dengan menggunakan gaya global.

Styled-Components menawarkan a createGlobalStyle fungsi yang memungkinkan Anda mendeklarasikan gaya secara global. Itu createGlobalStyle menghapus batasan gaya cakupan komponen dan memungkinkan Anda mendeklarasikan gaya yang berlaku untuk setiap komponen.

Untuk membuat gaya global, Anda mengimpor file createGlobalStyle berfungsi dan nyatakan gaya yang Anda butuhkan.

Misalnya:

 import {createGlobalStyle} from 'styled-components';

const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #343434;
        font-size: 15px;
        color: #FFFFFF;
        font-family: 'Montserrat', sans-serif;
    }
`

export default GlobalStyles;

Kemudian Anda mengimpor file GlobalStyles komponen ke dalam komponen aplikasi Anda dan merendernya. Rendering GlobalStyles komponen dalam komponen aplikasi Anda akan menerapkan gaya ke aplikasi Anda.

Seperti itu:

 import React from 'react';
import GlobalStyles from './Global';

function App() {
    return (
        <div>
            <GlobalStyles />
        </div>
    )
}

Lebih ke Komponen Bergaya

Anda telah mempelajari cara menyiapkan, menginstal, dan menggunakan komponen-gaya dalam aplikasi React Anda. Pustaka komponen-gaya adalah cara yang efisien untuk menata aplikasi React Anda. Ini menyediakan banyak fitur berguna yang memungkinkan fleksibilitas dalam gaya dan gaya dinamis.

Masih banyak lagi komponen yang diberi gaya, seperti animasi, dan React adalah kerangka kerja yang besar dengan banyak hal yang harus dipelajari selain itu.

Leave a Reply

Your email address will not be published. Required fields are marked *