Styling React Using CSS

Có nhiều cách để tạo kiểu cho React bằng CSS, tutorial này sẽ xem xét kỹ hơn ba cách phổ biến:

1. Inline styling
2. CSS stylesheets
3. CSS Modules

Inline Styling

Để tạo kiểu cho một phần tử với thuộc tính style, giá trị phải là một đối tượng JavaScript:

Ví dụ sau sẽ chèn một đối tượng với thông tin về các thuộc tính css:

Lưu ý: Trong JSX, các biểu thức JavaScript được viết bên trong cặp dấu ngoặc nhọn, và vì các đối tượng JavaScript cũng sử dụng cặp dấu ngoặc nhọn, các thuộc tính css trong ví dụ bên trên được viết bên trong hai cặp dấu ngoặc nhọn được lồng nhau {{}}.

Tên thuộc tính theo quy ước camelCased

Do inline CSS được viết bằng một đối tượng JavaScript, các thuộc tính với dấu gạch nối, như background-color, phải được viết bằng cú pháp camelCased:

Ví dụ sau sẽ sử dụng backgroundColor thay cho background-color:

Đối tượng JavaScript

Chúng ta cũng có thể tạo ra một đối tượng với thông tin về các thuộc tính css, và tham chiếu đến nó trong thuộc tính style:

Ví dụ sau sẽ tạo ra một đối tượng chứa các thuộc tính css có tên là myStyle:

CSS Stylesheet

Chúng ta có thể viết các thuộc tính CSS trong một tập tin riêng biệt, chỉ cần lưu tập tin đó với phần mở rộng là *.css, và import nó vào ứng dụng.

Chúng ta hãy tạo ra một tập tin mới có tên là "App.css" và chèn một số CSS code vào nó:

Lưu ý: Chúng ta có thể gọi tập tin này bất cứ khi nào chúng ta thích, chỉ cần nhớ chính xác phần mở rộng của tập tin.

Import tập tin css trên vào ứng dụng:

index.js:

CSS Modules

Một cách khác để thêm css vào ứng dụng là sử dụng các CSS Module.

Các CSS Module thì thuận tiện cho các component được đặt trong các tập tin riêng rẽ.

CSS bên trong một module chỉ có sẵn cho component đã import nó, và chúng ta không phải lo lắng về việc xung đột tên.

Chúng ta hãy tạo ra CSS module với phần mở rộng là .module.css, ví dụ: my-style.module.css.

Import css vào trong component:

Car.js:

Import component vào trong ứng dụng:

index.js: