React Styling Menggunakan CSS

Ada banyak cara untuk gaya React dengan CSS, tutorial ini akan melihat lebih dekat pada style inline , dan stylesheet CSS .

Styling Inline

Untuk menata elemen dengan atribut styling inline, nilainya harus berupa objek JavaScript:

Contoh:

Masukkan objek dengan informasi styling:

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Catatan: Di JSX, ekspresi JavaScript ditulis di dalam kurung kurawal, dan karena objek JavaScript juga menggunakan kurung kurawal, gaya pada contoh di atas ditulis dalam dua set kurung kurawal {{}}.

Nama Properti camelCased

Karena CSS sebaris ditulis dalam objek JavaScript, properti dengan dua nama, seperti background-color, harus ditulis dengan sintaks camel:

Contoh:

Gunakan backgroundColor daripada background-color:

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Objek JavaScript

Kamu juga dapat membuat objek dengan informasi styling, dan merujuknya di atribut style:

Contoh:

Buat objek gaya bernama mystyle:

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Stylesheet CSS

Kamu dapat menulis style CSS di file terpisah, cukup simpan file dengan ekstensi file.css, dan impor di aplikasi kamu.

App.css:

Buat file baru yang disebut “App.css” dan masukkan beberapa kode CSS di dalamnya:

  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Catatan: Kamu dapat memanggil file apa pun yang Anda suka, hanya ingat ekstensi file yang benar.

Impor stylesheet di aplikasi kamu:

index.js:

import ReactDOM from 'react-dom';
import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );
  
 
} 
}

ReactDOM.render(<MyHeader />, 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 dalam file terpisah.

CSS di dalam modul hanya tersedia untuk komponen yang mengimpornya, dan kamu tidak perlu khawatir tentang konflik nama.

Buat modul CSS dengan ekstensi.module.css , misalnya: mystyle.module.css.

mystyle.module.css:

Buat file baru yang disebut “mystyle.module.css” dan masukkan beberapa kode CSS di dalamnya:

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Impor stylesheet di komponen kamu:

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

export default Car;

Impor komponen dalam aplikasi kamu:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<Car />, document.getElementById('root'));