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ỏ
1 2 3 4 5 6 7 8 9 10 11 | npm install <span class="token operator">--</span>save styled<span class="token operator">-</span>jsx Thêm styled<span class="token operator">-</span>jsx<span class="token operator">/</span>babel vào plugins trong babel <span class="token punctuation">{</span> <span class="token string">"plugins"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">"styled-jsx/babel"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Giờ thì bạn đã có thể sẵn sàng code với style-jsx rồi
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>only <span class="token keyword">this</span> paragraph will <span class="token keyword">get</span> the style <span class="token punctuation">:</span><span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>style jsx<span class="token operator">></span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">` p { color: red; } `</span></span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> |
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
1 2 3 4 5 6 7 8 9 | <span class="token keyword">import</span> _JSXStyle <span class="token keyword">from</span> <span class="token string">'styled-jsx/style'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"jsx-123"</span><span class="token operator">></span> <span class="token operator"><</span>p className<span class="token operator">=</span><span class="token string">"jsx-123"</span><span class="token operator">></span>only <span class="token keyword">this</span> paragraph will <span class="token keyword">get</span> the style <span class="token punctuation">:</span><span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>_JSXStyle id<span class="token operator">=</span><span class="token string">"123"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`p.jsx-123 {color: red;}`</span></span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>_JSXStyle<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> |
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 đó
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>style jsx global<span class="token operator">></span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">` body { background: red } `</span></span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">import</span> Select <span class="token keyword">from</span> <span class="token string">'react-select'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Select optionClassName<span class="token operator">=</span><span class="token string">"react-select"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>style jsx<span class="token operator">></span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">` div :global(.react-select) { color: red } `</span></span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">const</span> <span class="token function-variable function">Button</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span>button<span class="token operator">></span> <span class="token punctuation">{</span> props<span class="token punctuation">.</span>children <span class="token punctuation">}</span> <span class="token operator"><</span>style jsx<span class="token operator">></span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">` button { padding: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token string">'large'</span> <span class="token keyword">in</span> props <span class="token operator">?</span> <span class="token string">'50'</span> <span class="token punctuation">:</span> <span class="token string">'20'</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px; background: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>theme<span class="token punctuation">.</span>background<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">; color: #999; display: inline-block; font-size: 1em; } `</span></span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token punctuation">)</span> |
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.