Sử dụng Styled-components cơ bản trong ReactJS
- Tram Ho
Mở đầu
Styled-components là gì ?
Styled-component là một thư viện CSS-in-JS tuyệt vời dành cho ReactJS. Nó giúp bạn có thể tùy biến và quản lý code CSS một cách dễ dàng.
Cài đặt Styled-components như sau:
1 2 3 4 5 6 | # <span class="token keyword">with</span> npm npm install styled<span class="token operator">-</span>components # <span class="token keyword">with</span> yarn yarn add styled<span class="token operator">-</span>components |
Styled-components cơ bản
Tạo một component bằng styled-components
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token comment">// Tạo một component Title và nó sẽ render ra thẻ h1 với các styles</span> <span class="token keyword">const</span> Title <span class="token operator">=</span> styled<span class="token punctuation">.</span>h1<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> font-size: 16px; text-align: center; color: black; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// Tạo một component Wrapper và nó sẽ render ra thẻ section với các styles</span> <span class="token keyword">const</span> Wrapper <span class="token operator">=</span> styled<span class="token punctuation">.</span>section<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> padding: 60px; background: blue; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// Sử dụng Title và Wrapper như là một React component</span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>Wrapper<span class="token operator">></span> <span class="token operator"><</span>Title<span class="token operator">></span> Hello World<span class="token operator">!</span> <span class="token operator"><</span><span class="token operator">/</span>Title<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Wrapper<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
Props
Bạn cũng có thể truyền props qua một component như React để có thể tùy biến CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token comment">// Tạo một Button với các styles như sau:</span> <span class="token keyword">const</span> Button <span class="token operator">=</span> styled<span class="token punctuation">.</span>button<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> /* ở đây nhận vào một props primary dùng toán tử 3 ngôi để kiểm tra và set giá trị cho background */ background: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token operator">=></span> props<span class="token punctuation">.</span>primary <span class="token operator">?</span> <span class="token string">"palevioletred"</span> <span class="token operator">:</span> <span class="token string">"white"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">; color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token operator">=></span> props<span class="token punctuation">.</span>primary <span class="token operator">?</span> <span class="token string">"white"</span> <span class="token operator">:</span> <span class="token string">"palevioletred"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">; padding: 0.25em 1em; border: none; border-radius: 3px; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Button<span class="token operator">></span>Normal<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span>Button primary<span class="token operator">></span>Primary<span class="token operator"><</span><span class="token operator">/</span>Button<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><span class="token punctuation">;</span> |
Một ví dụ khác cho việc pass props.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token comment">// Tạo một input component</span> <span class="token keyword">const</span> Input <span class="token operator">=</span> styled<span class="token punctuation">.</span>input<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token operator">=></span> props<span class="token punctuation">.</span>inputColor <span class="token operator">||</span> <span class="token string">"palevioletred"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">; background: papayawhip; border: none; border-radius: 3px; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Input defaultValue<span class="token operator">=</span><span class="token string">"Không màu"</span> type<span class="token operator">=</span><span class="token string">"text"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>Input defaultValue<span class="token operator">=</span><span class="token string">"Có màu"</span> type<span class="token operator">=</span><span class="token string">"text"</span> inputColor<span class="token operator">=</span><span class="token string">"rebeccapurple"</span> <span class="token operator">/</span><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><span class="token punctuation">;</span> |
Extending Styles
Là một cách dễ dàng để tạo ra một component mới được kế thừa những styles của component cũ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment">// Tạo một component Button có màu blue</span> <span class="token keyword">const</span> Button <span class="token operator">=</span> styled<span class="token punctuation">.</span>button<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> color: blue; font-size: 1em; border: none; border-radius: 3px; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// Tạo một RedButton kế thừa những style từ Button component phía trên và ghi đè, thêm mới một số styles</span> <span class="token keyword">const</span> RedButton <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span>Button<span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> color: red; border-color: red; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Button<span class="token operator">></span>Normal Button<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span>RedButton<span class="token operator">></span>Red Button<span class="token operator"><</span><span class="token operator">/</span>RedButton<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><span class="token punctuation">;</span> |
Styling any component
Tính năng này giúp chúng ta có thể CSS cho một component bất kì ví dụ như Link trong React-router-dom.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token comment">// Thực hiện việc import Link từ React-router-dom</span> <span class="token comment">// Tạo một component mới kế thừa từ Link component</span> <span class="token keyword">const</span> StyledLink <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span>Link<span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> color: palevioletred; font-weight: bold; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Link<span class="token operator">></span>Link chưa được <span class="token constant">CSS</span><span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token operator"><</span>StyledLink<span class="token operator">></span>Sau khi <span class="token constant">CSS</span><span class="token operator"><</span><span class="token operator">/</span>StyledLink<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><span class="token punctuation">;</span> |
CSS Selector
Trong Styled-components có thể sử dụng những CSS selector cơ bản như > , + , ~ …
Và sử dụng Nesting như SASS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <span class="token keyword">const</span> Thing <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> color: blue; /* & ở đây đại diện cho thẻ div được hiểu như sau div:hover */ &:hover { color: red; // <Thing> khi hover vào thẻ div } & ~ & { background: tomato; // <Thing> nằm phía sau không trực tiếp của <Thing> } & + & { background: lime; // <Thing> nằm phía sau trực tiếp của <Thing> } &.something { background: orange; // <Thing> có class .something } & .something { border: 1px solid; // element có class .something nằm bên trong <Thing> display: block; } .something-else & { border: 1px solid; // <Thing> nằm bên trong của element có class .something-else } </span><span class="token template-punctuation string">`</span></span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>React<span class="token punctuation">.</span>Fragment<span class="token operator">></span> <span class="token operator"><</span>Thing<span class="token operator">></span>Hello world<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>Thing<span class="token operator">></span> <span class="token operator"><</span>Thing<span class="token operator">></span>How ya doing<span class="token operator">?</span><span class="token operator"><</span><span class="token operator">/</span>Thing<span class="token operator">></span> <span class="token operator"><</span>Thing className<span class="token operator">=</span><span class="token string">"something"</span><span class="token operator">></span>The sun is shining<span class="token operator">...</span><span class="token operator"><</span><span class="token operator">/</span>Thing<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span>Pretty nice day today<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>Thing<span class="token operator">></span>Don't you think<span class="token operator">?</span><span class="token operator"><</span><span class="token operator">/</span>Thing<span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"something-else"</span><span class="token operator">></span> <span class="token operator"><</span>Thing<span class="token operator">></span>Splendid<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>Thing<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>React<span class="token punctuation">.</span>Fragment<span class="token operator">></span> <span class="token punctuation">)</span> |
Animations
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">import</span> <span class="token punctuation">{</span> keyframes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-component'</span><span class="token punctuation">;</span> <span class="token comment">// Tạo keyframes</span> <span class="token keyword">const</span> rotate <span class="token operator">=</span> keyframes<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> from { transform: rotate(0deg); } to { transform: rotate(360deg); } </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// áp dụng vào animation css</span> <span class="token keyword">const</span> Rotate <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> display: inline-block; animation: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rotate<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 2s linear infinite; padding: 2rem 1rem; font-size: 1.2rem; </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>Rotate<span class="token operator">></span>??<span class="token operator"><</span><span class="token operator">/</span>Rotate<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
Sử dụng Styled-component trong React như thế nào ?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">'styled-components'</span> <span class="token keyword">const</span> StyledCounter <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> /* ... */ </span><span class="token template-punctuation string">`</span></span> <span class="token keyword">const</span> Paragraph <span class="token operator">=</span> styled<span class="token punctuation">.</span>p<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> /* ... */ </span><span class="token template-punctuation string">`</span></span> <span class="token keyword">const</span> Button <span class="token operator">=</span> styled<span class="token punctuation">.</span>button<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> /* ... */ </span><span class="token template-punctuation string">`</span></span> <span class="token comment">// Một component đơn giản là Counter</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">const</span> <span class="token function-variable function">Counter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>StyledCounter<span class="token operator">></span> <span class="token operator"><</span>Paragraph<span class="token operator">></span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>Paragraph<span class="token operator">></span> <span class="token operator"><</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token operator">+</span><span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token operator">-</span><span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>StyledCounter<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Kết luận
Trên đây là những tính năng cơ bản của Styled-components. Mặc dù cơ bản nhưng nó đủ để bạn có thể ứng dụng vào ReactJS rồi.
Hãy đón xem phần 2 với nhưng tính năng như theme, global, css nhé. Cảm ơn bạn đã đọc bài viết.