Các phương pháp tạo kiểu cho React component

Có rất nhiều cách khác nhau để tạo kiểu cho React component. Ở đây chúng ta sẽ xem xét một số phương pháp cơ bản.

Cách tiếp cận tiêu chuẩn mà chúng ta có thể áp dụng, giống như khi tạo kiểu cho các trang web thông thường - đó là sử dụng CSS toàn cục. Ở đây chúng ta tạo một tệp CSS bên ngoài chung chứa các kiểu. Với cách tiếp cận này, tất cả tên lớp nằm trong phạm vi toàn cục, điều này có thể dẫn đến xung đột giữa chúng. Cũng có thể tạo ra nhiều tệp CSS nhỏ. Cách tiếp cận này không hiệu quả khi tạo các ứng dụng lớn có khả năng mở rộng.

Phương pháp tiếp theo - tạo kiểu inline, sử dụng nó, chúng ta có thể thêm kiểu CSS inline, giống như cách làm trong HTML thông thường. Trong trường hợp này, chúng ta sẽ làm việc với thuộc tính style, truyền cho nó các thuộc tính CSS cần thiết. Việc sử dụng kiểu tạo kiểu như vậy được coi là một thói quen xấu và chỉ được khuyến nghị để thêm các kiểu được tính toán động trong quá trình render. Cách này tốt để tạo mẫu nhanh giao diện của một component riêng lẻ.

Một vài phương pháp tiếp theo mà chúng ta sẽ xem xét là những cách hiện đại, đang ngày càng phổ biến, hiệu quả để tạo kiểu. Đây chính là những phương pháp được khuyến nghị áp dụng để tạo kiểu cho các ứng dụng React lớn, có khả năng mở rộng.

Đầu tiên trong số đó là áp dụng thư viện Styled Components, sử dụng chuỗi mẫu (template literals) để tạo kiểu. Phương pháp này cho phép chúng ta viết CSS thông thường trong mã JS, sử dụng toàn bộ tính năng của nó.

Cách thứ hai - áp dụng CSS Modules. Trong trường hợp này, CSS Module là một tệp CSS như vậy, trong đó theo mặc định, tất cả tên lớp và animation nằm trong phạm vi cục bộ, tức là chỉ có thể truy cập được bên trong component sử dụng nó.

Trong hai phương pháp cuối cùng này, chúng ta có thể không sợ xung đột giữa các tên lớp, vì chúng là duy nhất - sử dụng khái niệm phạm vi cục bộ. Cũng khi sử dụng chúng, không cần thiết phải áp dụng phương pháp luận BEM.

Trong các bài học tiếp theo, chúng ta sẽ xem xét tất cả các phương pháp được trình bày ở đây một cách chi tiết hơn.