Styling and CSS

Bagaimana saya menambahkan kelas CSS ke komponen?

Melewatkan sebuah string sebagai properti className:

render() {
  return <span className="menu navigation-menu">Menu</span>
}

Merupakan hal yang umum bagi kelas CSS untuk bergantung pada properti komponen atau state:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Tip

If you often find yourself writing code like this, classnames package can simplify it.

Dapatkah saya menggunakan inline styles?

Ya, lihat dokumen untuk styling disini.

Apakah inline styles buruk?

Performa kelas CSS biasanya lebih baik daripada inline styles.

Apa yang dimaksud dengan CSS-in-JS?

“CSS-in-JS” mengacu kepada pola dimana CSS disusun menggunakan JavaScript alih-alih didefinisikan di file eksternal.

Perhatikan bahwa fungsi ini bukan bagian dari React, tetapi disediakan oleh library dari pihak ketiga. React tidak memiliki pendapat tentang bagaimana style didefinisikan; jika ragu, titik awal yang baik adalah mendefinisikan style Anda secara terpisah dalam file *.css seperti biasa dan arahkan ke mereka menggunakan className.

Dapatkah saya membuat animasi di React?

React dapat digunakan untuk menggerakkan animasi. Lihat React Transition Group dan React Motion atau React Spring, untuk contoh.