Styling React với styled-jsx
In projects using React, you must be very familiar with libraries to support writing styles like Styled-component, css-module. Thanks to such libraries, creating styling is easy, class name overlaps are no longer a concern. But have you ever heard of the styled-jsx library? This library allows you to write styles right in components, also known as single file components.
Styled-jsx
To install yourself, I need to add some small config
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> |
Now you are ready to code with style-jsx
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> |
Thanks to that, the library can help me avoid overlapping styles. Above, I can see that I am styling all the p tags, so what about the other unwanted p tags? That’s thanks to the babel plugin we just configured above for support on the identifiers for the tags we just want to target. The above code will be compile becomes
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> |
Paragraphs like jsx-123 are the identifiers that differentiate tags that need style. In case you want to write a global style, style-jsx also supports you
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> |
In many situations, you will need to override a library style, or simply style from a parent component to a child component, which is also very simple as follows:
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> |
With the attribute :global , the .react-select class in the Select component will be styled quickly. Only such classes can be styled.
The dynamic style case is as simple as when you transfer the prop
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
Above are some features that style jsx has supported that I have learned. This is a pretty cool library, well worth a day when you’ve become accustomed to old libraries. Hopefully you will be able to find interesting points when using this library like me.