Hướng dẫn dùng react-jss JavaScript
Thời gian đọc: 3 phút Chào mọi người, ở bài viết này chúng ta sẽ cùng đi tìm hiểu về JSS, đây là một thư viện khá hay để hỗ trợ viết CSS trong JS, chúng ta có thể hiểu sơ sơ nó sẽ giống như Styled Components, Radium, Aphrodite,… Như mình đã nói bên trên, JSS cho phép chúng ta viết CSS trong JS. Đây là một thư viện bao gồm nhiều package hỗ trợ chúng ta trong quá trình Dev. Tại sao sử dụng JSSChắc hẳn một vài bạn sẽ thắc mắc tại sao phải sử dụng JSS, trong khi chúng ta có thể viết CSS riêng hoặc Inline CSS. Vì vậy mình sẽ nêu ra một số vấn đề dưới đây:
Ưu điểm và nhược điểm của JSSƯu điểm khi sử dụng JSS :
Nhược điểm:
Ví dụ về sử dụng JSSMuốn sử dụng được JSS đầu tiên chúng ta phải setup nó trong project của mình. Nếu các bạn muốn cấu hình thêm webpack hoặc gulp thì có thể xem bài này nhé! Cài đặtĐể cài đặt nó đầu tiên chúng ta dùng lệnh:
Tiếp theo chúng ta sẽ cài đặt preset:
Như vậy là phần cài đặt đã xong. Ví dụỞ đây, mình sẽ làm ví dụ đơn giản về popup thông báo nhé: Mình sẽ có phần HTML như thế này:
Còn đây là phần Js :
Tổng kếtNhư vậy là ở bài viết này chúng ta đã tìm hiểu về JSS và cách sử dụng nó. Hẹn gặp lại các bạn ở bài tiếp theo . |