Styling trong React

  • admin
  • 6 Tháng Sáu, 2022

Nay mình cùng tìm hiểu các cách khác nhau để style trong React nghen.

I. Inline styles

– Thêm vào thuộc tính style của tag html, và viết các thuộc tính theo dạng camelCase nha. Ví dụ backgroundColor, textAlign…

– Cách này ít dùng, chỉ dùng khi cần thay đổi styles theo props, hoặc giá trị động từ api trả về chẳng hạn

II. Css

– Cách này tạo 1 file css bên ngoài và import vào dùng những class, id… đã định nghĩa sẵn bên file css này là okie rồi

III. Scss & Bem

– Cũng như cách trên  nhưng tạo file scss và có thể viết sass trông gắn gọn, sạch sẽ hơn ahihi

IV. Css Module

– Đối với cách này thì sẽ tạo ra 1 unique class bằng cách thêm các chuỗi vào tên class nên sẽ ko gặp vấn đề về trùng class giữa các dev với nhau

V. Styled Component

– Cách này viết css trong js luôn. Nó sẽ tự tạo ra class unique cho mình nên cũng sẽ không gặp vấn đề trùng class cách css module

guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x