Cara Membuat Style Komponen React dengan CSS

Anda dapat menata aplikasi dan halaman React Anda menggunakan sejumlah teknik. Yang paling mudah adalah mengunduh pustaka komponen Bereaksi. Namun, bahkan saat menggunakan pustaka, cepat atau lambat Anda perlu menambahkan gaya kustom. Jadi, apa cara terbaik untuk melakukannya?

Untuk proyek skala kecil, Anda dapat dengan nyaman menata aplikasi Anda menggunakan Inline styles , Modules, atau dengan menulis sendiri spesifikasi className . Dan untuk proyek dinamis – seperti aplikasi – lebih baik menggunakan perpustakaan yang memungkinkan Anda mengimplementasikan alat peraga dengan mudah.

Atau, Anda dapat menggunakan kit utilitas seperti Tailwind UI, yang dilengkapi dengan gaya bawaan. Jika Anda perlu membuat mockup atau presentasi, kit UI React-friendly adalah cara yang tepat.

Penataan praktis dengan className

Di React, gaya CSS praktis diterapkan melalui properti className .

Ini juga sama dengan menggunakan stylesheet untuk proyek Anda. Karena React digerakkan oleh struktur komponen, Anda dapat mengimpor stylesheet Anda hanya untuk kebutuhan spesifik.

Mari kita lihat sebuah contoh.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

aplikasi.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

Dan ini akan menjadi hasilnya:

Ini adalah teknik vanilla yang benar-benar valid. Dan, paling sering digunakan untuk mendeklarasikan variabel global yang akan Anda gunakan kembali di seluruh komponen inti.

Satu-satunya peringatan adalah bahwa seiring pertumbuhan proyek Anda, begitu pula potensi konflik penamaan.

Demikian juga, biaya efisiensi pengelolaan ratusan stylesheet sangat tinggi.

Menggunakan JSX untuk Gaya Sebaris

React memungkinkan Anda menata elemen DOM menggunakan gaya sebaris. Sementara logika CSS tetap sama, gaya itu sendiri harus melewati JavaScript. Ini juga dikenal sebagai BEJ.

Mari kita lihat sebuah contoh:

Judul.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Satu hal yang akan Anda perhatikan adalah alih-alih menulis line-height kami menggunakan lineHeight .

Penjelasan untuk ini adalah, “Karena JSX lebih dekat dengan JavaScript daripada HTML, React DOM menggunakan konvensi penamaan properti camelCase alih-alih nama atribut HTML.” .

Gaya sebaris biasanya digunakan untuk menampilkan contoh, tetapi juga untuk menambahkan gaya dinamis ke elemen tertentu. Selain itu, gaya sebaris tidak mendukung elemen semu atau kueri media, karena Anda hanya dapat meneruskan gaya . Menggunakan stylesheet adalah alternatif yang lebih baik.

Membuat cakupan lokal dengan Modul CSS

Jika Anda ingin menerapkan gaya kustom ke komponen tanpa menamai tabrakan, salah satu cara untuk melakukannya adalah melalui Modul CSS.

Ini adalah pendekatan di mana Anda dapat menerapkan cakupan lokal ke setiap komponen satu per satu.

Seperti:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Anda juga dapat melakukan hal-hal seperti komposisi , di mana Anda memanggil gaya tertentu dari stylesheet lain – menghindari keharusan untuk menulis ulang logika yang sama dua kali.

 .header { composes: header from './style.css'; }

CSS di JS

Tidak seperti kerangka kerja seperti Vue dan Svelte, React tidak menyediakan antarmuka gayanya sendiri.

Jadi, meskipun Anda dapat menulis CSS untuk komponen menggunakan metode yang disebutkan di atas, pendekatan cawan suci adalah menggunakan CSS di pustaka JS. Setiap perpustakaan memiliki kekuatan dan kelemahannya, tetapi secara umum, manfaatnya tetap sama:

• Alat peraga untuk berbagai variasi gaya.
• Tema yang dapat diakses.
• Pelingkupan gaya berbasis komponen.
• Variabel CSS dinamis menggunakan fungsi JavaScript.

Solusi paling populer untuk CSS di JS adalah Komponen Bergaya.

Dan pilihan penting lainnya termasuk Emosi dan Linaria. Demi demo, mari kita lihat bagaimana CSS diintegrasikan ke dalam komponen React menggunakan library Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Pertama, kita membuat komponen baru bernama HeaderWrapper yang akan membuat wadah <section> untuk judul header kita. Kemudian kita membuat komponen lain yang disebut HeaderTitle dan meneruskan variabel CSS ke dalamnya. Jadi, di satu sisi, ini persis sama dengan bekerja dengan Komponen Web, hanya dalam konteks React.

Menggunakan Kerangka CSS

Bukannya semua yang ada di front-end bergerak menuju kerangka kerja dan perpustakaan.

Ini lebih berkaitan dengan fakta bahwa memulai proyek dari nol tidak efisien. Kerangka kerja seperti Tailwind CSS membantu mengurangi kebutuhan untuk menulis semua struktur aplikasi Anda dari awal. Cara kerja Tailwind CSS adalah bahwa framework menyediakan kelas utilitas yang telah ditentukan sebelumnya, memungkinkan Anda menyusun tata letak tanpa perlu menulis CSS independen.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Jadi, daripada mendefinisikan gaya komponen menggunakan Constants , kita bisa langsung menulis gaya seperti yang ditentukan oleh kerangka kerja. Metode seperti ini sangat efisien, dan Anda dapat misalnya – mengimpor komponen UI (seperti kartu) yang dibuat oleh orang lain.

Tailwind CSS sangat populer karena Anda dapat langsung menyalin dan menempelkan cuplikan, dan menggunakannya dalam desain aplikasi Anda tanpa konsekuensi apa pun.

Menggunakan Perpustakaan UI

Metode terakhir untuk menata komponen React adalah dengan menggunakan pustaka UI. Tidak seperti framework, library UI mengikuti panduan gaya. Jadi, dalam banyak hal, ia hadir dengan gaya yang sudah ditentukan sebelumnya. Orang-orang seperti Mantine dan Material UI adalah beberapa pilihan masuk.

Satu-satunya "kelemahan" adalah Anda harus menghabiskan cukup banyak waktu untuk mempelajari perpustakaan tertentu. Tapi, hal yang sama bisa dikatakan untuk kerangka kerja. Terlepas dari hambatan masuk, baik kerangka kerja CSS dan pustaka UI adalah standar emas dalam menata komponen React.