Styling React Menggunakan CSS
Ada banyak cara untuk menata React dengan CSS, tutorial ini akan melihat lebih dekat pada tiga cara umum:
- Penataan sebaris
- lembar gaya CSS
- Modul CSS
Penataan Sebaris
Untuk menata gaya elemen dengan atribut gaya sebaris, nilainya harus berupa objek JavaScript:
Contoh:
Sisipkan objek dengan informasi gaya:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Catatan: Di BEJ, ekspresi JavaScript ditulis di dalam kurung kurawal, dan karena objek JavaScript juga menggunakan kurung kurawal, gaya pada contoh di atas ditulis di dalam dua set kurung kurawal {{}}.
Nama Properti Cased unta
Karena CSS sebaris ditulis dalam objek JavaScript, properti dengan pemisah tanda hubung, seperti background-color, harus ditulis dengan sintaks camel case:
Contoh:
Gunakan backgroundColorsebagai ganti
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Objek JavaScript
Anda juga dapat membuat objek dengan informasi gaya, dan merujuknya ke dalam atribut gaya:
Contoh:
Buat objek gaya bernama myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Dapatkan Sertifikasi!
$95 DAFTAR
Lembar Gaya CSS
Anda dapat menulis gaya CSS Anda dalam file terpisah, cukup simpan file dengan
.cssekstensi file, dan impor di aplikasi Anda.
Aplikasi.css:
Buat file baru bernama "App.css" dan masukkan beberapa kode CSS di dalamnya:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Catatan: Anda dapat memanggil file apa pun yang Anda suka, cukup ingat ekstensi file yang benar.
Impor lembar gaya di aplikasi Anda:
indeks.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
Modul CSS
Cara lain untuk menambahkan gaya ke aplikasi Anda adalah dengan menggunakan Modul CSS.
Modul CSS nyaman untuk komponen yang ditempatkan di file terpisah.
CSS di dalam modul hanya tersedia untuk komponen yang mengimpornya, dan Anda tidak perlu khawatir tentang konflik nama.
Buat modul CSS dengan .module.css
ekstensi, contoh: my-style.module.css.
Buat file baru bernama "my-style.module.css" dan masukkan beberapa kode CSS di dalamnya:
my-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Impor lembar gaya di komponen Anda:
mobil.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Impor komponen dalam aplikasi Anda:
indeks.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));