Styled Components và cách tổ chức

1459

Chào anh em, như tiêu đề hôm nay mình xin giới thiệu một vài thủ thuật làm việc với styled components.

Trong các dự án React mình support, phần lớn đều ứng dụng styled components để thay thế cho cách viết CSS hay SCSS truyền thống. Đây là thư viện thường dùng để styled cho React App.

Vì sao không dùng SCSS để styled?

Với React, ta viết các style của các component như CSS thông thường là import file CSS tương ứng này vào ở component đó (hoặc root component chứa nó). Nếu là file SCSS ta có thể dùng node-sass để import thẳng vào hoặc có thể dùng webpack để build tương tự. Tuy nhiên với React thì cách đó không được khuyến khích, vì nó không thể hiện được CSS nào tương ứng với component nào, style nên đi kèm với component.

Cài đặt

Với npm

Hoặc dùng CDN

Tạo 1 component

Ta cũng có thể extends lại component dễ dàng

Một số tricks có thể bạn chưa biết

1. Sử dụng Context API

2. Styled linh hoạt với props

Đây là tính năng thú vị khi sử dụng styled components, bạn có thể truyền props các thuộc tính để styled linh hoạt hơn.

3. Selector đến phần tử khác

Giống với CSS truyền thống, bạn cũng có thể selector được đến phần tử con hoặc ngang cấp.

4. Kế thừa styled nhưng custom tagName

Với styled components bạn cũng có thể thay đổi tag name so với định nghĩa ban đầu. Phù hợp cho việc tạo common nhưng có thể thay đổi linh hoạt cấu trúc tag HTML5 cho phù hợp.

5. Thêm attribute thông qua attrs

6. Override existing / inline style

Thông thường nó được sử dụng khi bạn override styled của một component đã có sẵn ở thư viện, ví dụ bạn sử dụng reactstrap và muốn custom component thì hãy xem phần demo bên dưới:

7. Định nghĩa keyframe CSS3

8. Mixins pattern

9. Quy hoạch thế nào để dễ quản lý

Đến đây chắc các bạn cũng đã biết kha khá về thanh niên này. Mình thường tổ chức project React với cấu trúc như bên dưới, mình nghĩ đây là cách tổ chức tối ưu nhất để làm việc với styled components.

Nhận xét

Điểm mạnh

  • Truyền được props linh hoạt
  • Performance tốt tối ưu
  • Đóng gói được styled vào component, tránh vấn đề trùng lặp override selector
  • Cách viết lồng, thừa kế, có prefix giống SCSS và dễ tiếp cận

Hạn chế

  • Tốn nhiều thời gian định nghĩa component
  • Tên class được generate ngẫu nhiên nên sẽ gây khó chịu cho người quen debug css bằng tên class
  • Là kiểu viết CSS-in-JS nên sẽ có nhiều người chưa thích
  • Không được dùng ref trên component phải chuyển sang innerRef bởi vì ref sẽ được truyền vào wrapper của styled component thay vì component mình muốn.

Thời buổi này phải dùng tools

– Debug tool

Với styled components, để debug CSS không phải là chuyện dễ dàng. Tuy nhiên vỏ quýt dày có móng tay nhọn, móng tay nhọn đã có bấm móng tay. Đây là tool debug hàng chính chủ, bạn có thể follow ở link này để setup trong source: https://styled-components.com/docs/tooling

– Extension VS Code

Để tăng tốc độ gõ phím mình thường dùng 2 em này, có nhiều tính năng support


Nếu anh em có thêm tricks hay, thú vị hãy chia sẻ thêm ở comment nhé! Cảm ơn các bro.

TopDev via Viblo

SHARE