Styling React với styled-jsx

Tram Ho

Styling React với styled-jsx

Trong những dự án sử dụng React, chắc hăn các bạn đã rất quen thuộc với những thư viện để hỗ trợ viết style như Styled-component, css-module. Nhờ những thư viện như vậy, việc viết styling trở nên thật dễ dàng, sự trùng chéo class name không còn phải là mối bận tâm nữa. Nhưng bạn đã từng nghe đến thư viện styled-jsx chưa? Thư viện này giúp bạn có thể viết được ngay style trong component, hay còn gọi là single file component.

Styled-jsx

Để cài đặt mình cần phải thêm một số config nho nhỏ

Giờ thì bạn đã có thể sẵn sàng code với style-jsx rồi

Nhờ đâu mà thư viện có thể giúp mình tránh việc trùng chéo style. ở trên, mình có thể thấy là mình đang styling toàn bộ những thẻ p, vậy thì những thẻ p khác không mong muốn thì sao. Đó chính là nhờ ở babel plugin ta vừa config trên đã hỗ trợ trêm những định danh cho những thẻ mà ta chỉ mong muốn hướng tới.
Đoạn code trên sẽ được compile trở thành

Những đoạn như jsx-123 chính là những định danh để phân biệt các thẻ cần style với nhau.
Trong trường hợp bạn muốn viết style global thì sao, style-jsx cũng hỗ trợ bạn điều đó

Trong nhiều tình huống, bạn sẽ cần override 1 style thư viện nào đó, hoặc đơn giản chỉ là style từ component cha xuống component con, việc đó cũng rất đơn giản như sau

Với thuộc tính :global , class .react-select trong Select component sẽ được style một cách nhanh chóng. Chỉ những class như vậy mới được style mà thôi.

Trường hợp dynamic style cũng đơn giản như khi bạn truyền prop vậy

Conclusion

Trên đây là một số tính năng mà style jsx đã hỗ trợ mà mình đã tìm hiểu được. Đây là một thư viện khá hấp dẫn, đáng để sử dụng trong những ngày mà bạn đã cảm thấy quá quen thuộc với những thư viện cũ. Hy vọng rằng bạn sẽ có thể tìm được những điểm thụ vị khi sử dụng thư viện này như mình.

References

https://github.com/zeit/styled-jsx

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo