Styling và CSS

Làm thế nào tôi chèn class CSS cho các component?

Truyền tên của class cho prop là className:

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

Thông thường các class CSS phụ thuộc vào các component props hoặc state:

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

Tip

Nếu bạn thường thấy mình viết code như thế , classnames thư viện này sẽ làm đơn giản nó.

Tôi có dùng được inline styles?

Có, xem tài liệu styling tại đây.

Viết inline styles xấu?

Các class CSS thường sẽ có hiệu suất tốt hơn là inline styles.

CSS-in-JS là gì?

“CSS-in-JS” đề cập đến một pattern trong đó CSS ​​được tạo bằng JavaScript thay vì được định nghĩa trong các tệp bên ngoài. Đọc một bài viết so sánh các thư viện CSS-in-JS ở đây.

Lưu ý đây không phải là thư viện của React, nhưng được cung câp bởi thư viện thứ ba. React không có ý kiến về cách xác định style; nếu nghi ngờ, bạn có thể định nghĩa style trong một tệp *.css riêng và tham chiếu tới chúng sử dụng className.

Tôi có thể dùng animations trong React?

React có thể sử dụng animations rất tốt. Xem ví dụ React Transition Group và React Motion hoặc React Spring.