Kita semua akrab dengan cara standar menghubungkan lembar gaya ke <head> dari dokumen HTML, bukan? Itu hanya salah satu dari beberapa cara kita dapat menulis CSS. Tapi bagaimana rasanya menata sesuatu dalam aplikasi satu halaman (SPA), katakanlah dalam proyek Bereaksi?
Ternyata ada beberapa cara untuk menata aplikasi React. Beberapa tumpang tindih dengan gaya tradisional, yang lain tidak begitu banyak. Tapi mari kita hitung semua cara yang bisa kita lakukan.
Mengimpor lembar gaya eksternal
Seperti namanya, React dapat mengimpor file CSS. Prosesnya mirip dengan bagaimana kita menautkan file CSS di HTML <head>:
- Buat file CSS baru di direktori proyek Anda.
- Tulis CSS.
- Impor ke dalam file Bereaksi.
Seperti ini:
import "./style.css";Itu biasanya berada di bagian atas file tempat impor lainnya terjadi:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;Dalam contoh ini, file CSS diimpor ke dalam App.js dari /Components/css folder.
Tulis gaya sebaris
Anda mungkin terbiasa mendengar bahwa gaya inline tidak terlalu bagus untuk perawatan dan yang lainnya, tetapi pasti ada situasi (ini dia!) di mana itu masuk akal. Dan pemeliharaan tidak terlalu menjadi masalah di React, karena CSS sering kali sudah berada di dalam file yang sama.
Ini adalah contoh gaya inline yang sangat sederhana di React:
<div className="main" style={{color:"red"}}>Namun, pendekatan yang lebih baik adalah menggunakan objek:
- Pertama, buat objek yang berisi gaya untuk elemen yang berbeda.
- Kemudian tambahkan ke elemen menggunakan
styleatribut dan kemudian pilih properti untuk ditata.
Mari kita lihat dalam konteks:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Contoh ini mengandung styles objek yang berisi dua objek lagi, satu untuk .main class dan yang lainnya untuk input teks, yang berisi aturan gaya yang mirip dengan apa yang kita harapkan untuk dilihat di stylesheet eksternal. Objek-objek tersebut kemudian diterapkan pada style atribut elemen yang ada di markup yang dikembalikan.
Perhatikan bahwa tanda kurung kurawal digunakan saat merujuk gaya daripada tanda kutip yang biasanya kita gunakan dalam HTML biasa.
Gunakan Modul CSS
Modul CSS… apa yang terjadi dengan mereka, kan? Mereka memiliki manfaat dari variabel lingkup lokal dan dapat digunakan tepat di samping React. Tapi apa sebenarnya mereka?
Mengutip dokumentasi repo:
Modul CSS bekerja dengan mengkompilasi file CSS individual ke dalam CSS dan data. Keluaran CSS adalah CSS global yang normal, yang dapat disuntikkan langsung ke browser atau digabungkan bersama dan ditulis ke file untuk penggunaan produksi. Data digunakan untuk memetakan nama yang dapat dibaca manusia yang telah Anda gunakan dalam file ke CSS keluaran yang aman secara global.
Dalam istilah yang lebih sederhana, Modul CSS memungkinkan kita untuk menggunakan nama kelas yang sama dalam banyak file tanpa bentrok karena setiap nama kelas diberi nama program yang unik. Ini sangat berguna dalam aplikasi yang lebih besar. Setiap nama kelas dicakup secara lokal ke komponen tertentu di mana ia sedang diimpor.
Stylesheet Modul CSS mirip dengan stylesheet biasa, hanya dengan ekstensi yang berbeda (mis styles.module.css). Berikut cara penyiapannya:
- Buat file dengan
.module.csssebagai ekstensi. - Impor modul itu ke dalam aplikasi React (seperti yang kita lihat sebelumnya)
- Tambahkan
classNameke elemen atau komponen dan referensi gaya tertentu dari gaya yang diimpor.
Contoh super sederhana:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Gunakan komponen gaya
Sudahkah Anda menggunakan gaya-komponen? Ini cukup populer dan memungkinkan Anda membuat komponen khusus menggunakan CSS aktual di JavaScript Anda. Komponen gaya pada dasarnya adalah komponen Bereaksi dengan — bersiap-siaplah — gaya. Beberapa fitur termasuk nama kelas yang unik, gaya dinamis dan manajemen CSS yang lebih baik karena setiap komponen memiliki gaya tersendiri.
Instal paket npm komponen gaya di baris perintah:
npm install styled-componentsSelanjutnya, impor ke aplikasi React:
import styled from 'styled-components'Buat komponen dan tetapkan properti gaya ke dalamnya. Perhatikan penggunaan literal template yang dilambangkan dengan backticks di Wrapper obyek:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Atas Wrapper komponen akan dirender sebagai div yang berisi gaya tersebut.
Gaya bersyarat
Salah satu keuntungan komponen gaya adalah komponen itu sendiri berfungsi, seperti Anda dapat menggunakan alat peraga di dalam CSS. Ini membuka pintu ke pernyataan bersyarat dan mengubah gaya berdasarkan status atau penyangga.
Berikut demo yang menunjukkannya:
Di sini, kami memanipulasi div display properti pada status tampilan. Status ini dikendalikan oleh tombol yang mengubah status div saat diklik. Ini, pada gilirannya, beralih di antara gaya dua status yang berbeda.
sebaris if pernyataan, kami menggunakan ? bukannya biasa if/else sintaksis. Itu else bagian setelah titik koma. Dan ingat untuk selalu memanggil atau menggunakan status setelah diinisialisasi. Dalam demo terakhir itu, misalnya, statusnya harus di atas Wrapper gaya komponen.
Selamat React styling!
Itu bungkus, orang-orang! Kami melihat beberapa cara berbeda untuk menulis gaya dalam aplikasi React. Dan itu tidak seperti yang satu lebih baik dari yang lain; pendekatan yang Anda gunakan tergantung pada situasi, tentu saja. Mudah-mudahan sekarang Anda memiliki pemahaman yang baik tentang mereka dan tahu bahwa Anda memiliki banyak alat di gudang styling React Anda.
