{"id":1659,"date":"2021-10-22T09:32:51","date_gmt":"2021-10-22T02:32:51","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=1659"},"modified":"2021-12-27T18:00:54","modified_gmt":"2021-12-27T11:00:54","slug":"css-in-js-and-styled-components","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/css-in-js-and-styled-components.html","title":{"rendered":"CSS-in-JS l\u00e0 g\u00ec? \u0110\u00f4i n\u00e9t v\u1ec1 th\u01b0 vi\u1ec7n Styled-components"},"content":{"rendered":"\n<p>C\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS \u0111\u00e3 v\u00e0 \u0111ang nh\u1eadn \u0111\u01b0\u1ee3c nhi\u1ec1u s\u1ef1 quan t\u00e2m k\u1ec3 t\u1eeb khi c\u00e1c framework JavaScript d\u1ef1a tr\u00ean component xu\u1ea5t hi\u1ec7n trong quy tr\u00ecnh ph\u00e1t tri\u1ec3n front-end. Ch\u1eafc h\u1eb3n b\u1ea1n \u0111\u00e3 t\u1eebng nghe qua c\u00e1c th\u01b0 vi\u1ec7n nh\u01b0 Styled-components, JSS hay Radium. \u0110i\u1ec3m chung c\u1ee7a ch\u00fang l\u00e0 ch\u00fang \u0111\u1ec1u l\u00e0 c\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS. V\u1eady CSS-in-JS l\u00e0 g\u00ec?<\/p>\n\n\n\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta c\u00f9ng t\u00ecm hi\u1ec3u l\u1eddi gi\u1ea3i cho c\u00e2u h\u1ecfi tr\u00ean v\u00e0 c\u00fang ti\u1ebfp c\u1eadn m\u1ed9t th\u01b0 vi\u1ec7n CSS-in-JS r\u1ea5t \u0111\u01b0\u1ee3c y\u00eau th\u00edch l\u00e0 Style-components \u0111\u1ec3 th\u1ea5y \u0111\u01b0\u1ee3c s\u1ee9c m\u1ea1nh to l\u1edbn c\u1ee7a ch\u00fang nh\u00e9!<\/p>\n\n\n<h2>CSS-in-JS l\u00e0 g\u00ec?<\/h2>\n\n\n<p>C\u00e1c framework JavaScript hi\u1ec7n \u0111\u1ea1i nh\u01b0 React, Vue, Angular,&#8230; H\u1ea7u h\u1ebft \u0111\u1ec1u \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean c\u00e1c <code>component<\/code>. T\u1eeb <code>component<\/code>, b\u1ea1n c\u00f3 th\u1ec3 x\u00e2y d\u1ef1ng to\u00e0n b\u1ed9 m\u1ed9t Single-page Application(SPA). M\u1ed9t <code>component<\/code> th\u01b0\u1eddng l\u00e0 m\u1ed9t ph\u1ea7n t\u1eed giao di\u1ec7n nh\u01b0 button, pop-up, hay thanh \u0111i\u1ec1u h\u01b0\u1edbng. B\u1ea1n ch\u1ec9 c\u1ea7n t\u1ea1o ra c\u00e1c <code>component<\/code> m\u1ed9t l\u1ea7n, v\u00e0 c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng ch\u00fang trong b\u1ea5t k\u1ef3 n\u01a1i n\u00e0o trong trang web(hay \u1ee9ng d\u1ee5ng).<\/p>\n\n\n\n<p>Nh\u01b0ng l\u00e0m sao \u0111\u1ec3 t\u1ea1o ra c\u00e1c component m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3? N\u1ebfu s\u1eed d\u1ee5ng c\u00e1c file css to\u00e0n c\u1ee5c th\u00ec r\u1ea5t kh\u00f3 \u0111\u1ec3 tr\u00e1nh sai s\u00f3t trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n. V\u00ec t\u00ednh ch\u1ea5t <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Specificity\" target=\"_blank\" rel=\"noopener\">Specificity<\/a> c\u1ee7a CSS, c\u00e1c stylesheet c\u00f3 th\u1ec3 t\u1ea3i theo b\u1ea5t k\u00ec th\u1ee9 t\u1ef1 n\u00e0o v\u00e0 properties trong \u0111\u00f3 c\u00f3 th\u1ec3 ghi \u0111\u00e8 nhau b\u1ea5t c\u1ee9 l\u00fac n\u00e0o. Qu\u1ea3n l\u00fd Dependency c\u0169ng l\u00e0 m\u1ed9t v\u1ea5n \u0111\u1ec1 kh\u00e1c khi l\u00e0m vi\u1ec7c v\u1edbi SPA, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c \u1ee9ng d\u1ee5ng web ph\u1ee9c t\u1ea1p.<\/p>\n\n\n\n<p>\u0110\u00e3 c\u00f3 m\u1ed9t s\u1ed1 gi\u1ea3i ph\u00e1p \u0111\u01b0\u1ee3c \u0111\u01b0a ra \u0111\u1ec3 gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y, v\u00ed d\u1ee5 nh\u01b0 <code>scope<\/code> trong Vue, BEM, modules h\u00f3a v\u1edbi PostCSS,&#8230; Nh\u01b0ng c\u00f3 th\u1ec3 n\u00f3i, c\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS \u0111\u00e3 \u0111\u01b0a ra gi\u1ea3i ph\u00e1p \u1edf c\u1ea5p \u0111\u1ed9 cao h\u01a1n \u0111\u1ec3 gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 tr\u00ean. Ch\u00fang cung c\u1ea5p m\u1ed9t c\u00e1ch c\u1ee5 th\u1ec3 \u0111\u1ec3 s\u1eed d\u1ee5ng CSS tr\u1ef1c ti\u1ebfp trong file JS. T\u1eeb \u0111\u00f3 c\u00f3 th\u1ec3 khai th\u00e1c \u0111\u01b0\u1ee3c t\u00ednh linh ho\u1ea1t c\u1ee7a JS v\u00e0 kh\u1eafc ph\u1ee5c \u0111\u01b0\u1ee3c c\u00e1c v\u1ea5n \u0111\u1ec1 \u0111\u00e3 n\u00eau v\u1edbi CSS.<\/p>\n\n\n\n<h2>C\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a CSS-in-JS<\/h2>\n\n\n\n<p>L\u1ea5y v\u00ed d\u1ee5 v\u1edbi Styled-components:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import styled from &#39;styled-components&#39;; \nconst Text = styled.h2` \ncolor: #212121, \n` \n\n&lt;Text&gt;Hello Marketenterprise Vietnam&lt;\/Text&gt;<\/code><\/pre><\/div>\n\n\n\n<pre class=\"wp-block-preformatted\"><\/pre>\n\n\n\n<p>\u0110o\u1ea1n code tr\u00ean s\u1ebd cho k\u1ebft qu\u1ea3 tr\u00ean browser nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;style&gt;\n.fWxBIM {\n  color: #212121;\n}\n&lt;\/style&gt;\n\n&lt;h2 class=&quot;fWxBIM&quot;&gt;Hello Marketenterprise Vietnam&lt;\/h2&gt;<\/code><\/pre><\/div>\n\n\n\n<p>Trong \u0111o\u1ea1n code tr\u00ean \u0111\u00e3 t\u1ea1o ra m\u1ed9t class <code>fWxBIM<\/code> v\u00e0 g\u1eafn th\u1ebb <code>&lt;style&gt;<\/code> \u1edf ph\u1ea7n tr\u00ean c\u1ee7a DOM. M\u1eb7c d\u00f9 \u0111\u00e2y l\u00e0 c\u00e1ch tuy\u1ec7t v\u1eddi \u0111\u1ec3 t\u1ea1o ra m\u1ed9t class ri\u00eang bi\u1ec7t, kh\u00f4ng tr\u00f9ng l\u1eb7p v\u1edbi b\u1ea5t k\u1ef3 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0o kh\u00e1c, v\u00e0 h\u1ea7u h\u1ebft c\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS n\u1ed5i ti\u1ebfng \u0111\u1ec1u s\u1eed d\u1ee5ng c\u00e1ch n\u00e0y.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, v\u1eabn c\u00f3 m\u1ed9t s\u1ed1 library ch\u1ecdn c\u00e1ch th\u00eam tr\u1ef1c ti\u1ebfp CSS v\u00e0o HTML thay v\u00ec t\u1ea1o ra c\u00e1c class duy nh\u1ea5t, \u0111i\u1ec3n h\u00ecnh trong nh\u00f3m n\u00e0y l\u00e0 <a href=\"https:\/\/github.com\/FormidableLabs\/radium\" target=\"_blank\" rel=\"noopener\">Radium<\/a>.<\/p>\n\n\n\n<p>Ngo\u00e0i ra, m\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n ch\u1ec9 h\u1ed7 tr\u1ee3 m\u1ed9t ho\u1eb7c m\u1ed9t s\u1ed1 framework c\u1ee5 th\u1ec3, nh\u01b0 <code>Radium<\/code>, <code>Styled-JSX<\/code> ch\u1ec9 h\u1ed7 tr\u1ee3 nh\u1eefng \u1ee9ng d\u1ee5ng <code>React<\/code>, <code>JSX<\/code>(Framework-Specific). M\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n kh\u00e1c l\u1ea1i c\u00f3 b\u1ea3n ch\u1ea5t l\u00e0 JavaScript thu\u1ea7n, n\u00ean c\u00f3 th\u1ec3 \u1ee9ng d\u1ee5ng \u0111\u01b0\u1ee3c cho nhi\u1ec1u framework component(Framework-Agnostic). N\u1ed5i b\u1eadt trong nh\u00f3m n\u00e0y l\u00e0 <code>Emotion<\/code>, <code>JSS<\/code>.<\/p>\n\n\n\n<p>V\u00e0 t\u1ea5t nhi\u00ean, c\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS kh\u00e1c nhau v\u1ec1 c\u1ea3 ch\u1ee9c n\u0103ng v\u00e0 \u0111\u1ed9 h\u1ed7 tr\u1ee3 l\u1eadp tr\u00ecnh vi\u00ean. Tuy c\u00f9ng gi\u1ea3i quy\u1ebft m\u1ed9t v\u1ea5n \u0111\u1ec1, nh\u01b0ng m\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n c\u00f3 c\u00e1c ch\u1ee9c n\u0103ng \u0111\u1eb7c th\u00f9, ri\u00eang bi\u1ec7t m\u00e0 hi\u1ebfm \u0111\u01b0\u1ee3c b\u1eaft g\u1eb7p \u1edf c\u00e1c th\u01b0 vi\u1ec7n kh\u00e1c, v\u00ed d\u1ee5 nh\u01b0: global selector; caching; client hay SSR, ho\u1eb7c c\u1ea3 hai.<\/p>\n\n\n\n<p>T\u00f3m l\u1ea1i, c\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS r\u1ea5t \u0111a d\u1ea1ng, ch\u00fang kh\u00e1c nhau v\u1ec1 c\u1ea3 syntax, c\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng, framework h\u1ed7 tr\u1ee3, x\u1eed l\u00fd scope v\u00e0 c\u1ea3 ch\u1ee9c n\u0103ng n\u1eefa. C\u00e1c b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o m\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n CSS-in-JS <a href=\"https:\/\/github.com\/michelebertoli\/css-in-js#features\" target=\"_blank\" rel=\"noopener\">t\u1ea1i \u0111\u00e2y<\/a>.<\/p>\n\n\n<h2>Nh\u1eefng \u01b0u \u0111i\u1ec3m c\u1ee7a CSS-in-JS<\/h2>\n\n\n<p>\u1ede \u0111\u00e2y m\u00ecnh ch\u1ec9 n\u00eau ra nh\u1eefng \u01b0u \u0111i\u1ec3m r\u00f5 r\u00e0ng nh\u1ea5t c\u1ee7a CSS-in-JS:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Ph\u1ea1m vi CSS c\u1ee5c b\u1ed9(local scoping)<\/strong>: nh\u01b0 \u0111\u00e3 ph\u00e2n t\u00edch \u1edf tr\u00ean, local scoping h\u1ea1n ch\u1ebf hi\u1ec7u l\u1ef1c c\u1ee7a CSS trong ph\u1ea1m vi component. T\u1eeb \u0111\u00f3 tr\u00e1nh ghi \u0111\u00e8 CSS gi\u1eefa c\u00e1c component.<\/li><li><strong>T\u1eadn d\u1ee5ng c\u00e1c k\u1ef9 thu\u1eadt, syntax JS<\/strong>: C\u01a1 b\u1ea3n CSS-in-JS l\u00e0 Javascript. Ngh\u0129a l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u1ee9ng d\u1ee5ng c\u00e1c k\u1ef9 thu\u1eadt Javascript, nh\u01b0 v\u00f2ng l\u1eb7p, c\u00e2u l\u1ec7nh \u0111i\u1ec1u ki\u1ec7n, bi\u1ebfn,&#8230; v\u00e0o \u0111\u1ec3 h\u1ed7 tr\u1ee3 styling. \u0110\u00e2y l\u00e0 \u0111i\u1ec1u khi\u1ebfn CSS-in-JS c\u1ef1c k\u1ef3 linh ho\u1ea1t v\u00e0 trong khi v\u1eabn t\u1ed1n c\u1ef1c \u00edt code.<\/li><li><strong>\u0110\u00f3ng g\u00f3i<\/strong>: c\u00e1c component \u0111\u01b0\u1ee3c &#8220;\u0111\u00f3ng g\u00f3i&#8221; c\u1ea9n th\u1eadn v\u00e0 ch\u1ec9 public m\u1ed9t s\u1ed1 API \u0111\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n kh\u00e1c. T\u00ednh n\u0103ng thu\u1eadn ti\u1ec7n cho vi\u1ec7c b\u1ea3o tr\u00ec code h\u1ea1n ch\u1ebf l\u1ed7i n\u1ebfu mu\u1ed1n c\u00f3 thay \u0111\u1ed5i trong m\u1ed9t component, kh\u00f4ng \u1ea3nh h\u01b0\u1edfng t\u1edbi c\u00e1c ph\u1ea7n kh\u00e1c c\u1ee7a \u1ee9ng d\u1ee5ng.<\/li><li><strong>Di \u0111\u1ed9ng:<\/strong> V\u00ec m\u1ed7i component bao g\u1ed3m t\u1ea5t c\u1ea3 source code, CSS, v\u00e0 logic c\u1ea7n \u0111\u1ec3 ch\u1ea1y \u0111\u00fang trong m\u1ed9t file\/folder, ch\u00fang ta c\u00f3 th\u1ec3 di chuy\u1ec3n ch\u00fang t\u1edbi b\u1ea5t c\u1ee9 \u0111\u00e2u trong source code \u1ee9ng d\u1ee5ng m\u1ed9t c\u00e1ch an to\u00e0n.<\/li><li><strong>T\u00e1i s\u1eed d\u1ee5ng<\/strong>: T\u1ea5t nhi\u00ean r\u1ed3i, v\u00ec \u0111\u01b0\u1ee3c vi\u1ebft d\u1ef1a tr\u00ean nguy\u00ean t\u1eafc component, n\u00ean ch\u00fang ta c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng ch\u00fang \u1edf b\u1ea5t c\u1ee9 \u0111\u00e2u.<\/li><\/ul>\n\n\n<h2>Nh\u01b0\u1ee3c \u0111i\u1ec3m c\u1ee7a CSS-in-JS<\/h2>\n\n\n<p>M\u1eb7c d\u00f9 r\u1ea5t nhi\u1ec1u \u01b0u \u0111i\u1ec3m \u0111\u00e3 k\u1ec3, CSS-in-JS v\u1eabn c\u00f3 nhi\u1ec1u \u0111i\u1ec3m m\u00e0 b\u1ea1n c\u1ea7n l\u01b0u \u00fd n\u1ebfu c\u00f3 \u00fd \u0111\u1ecbnh d\u00f9ng ch\u00fang trong d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Th\u1eddi gian h\u1ecdc: b\u1ea1n ch\u1eafc ch\u1eafn ph\u1ea3i b\u1ecf ra th\u1eddi gian h\u1ecdc t\u1eadp v\u00e0 l\u00e0m quen v\u1edbi CSS-in-JS. \u0110\u1eb7c bi\u1ec7t l\u00e0 nh\u1eefng ng\u01b0\u1eddi l\u1ea7n \u0111\u1ea7u ti\u1ebfp x\u00fac v\u1edbi c\u00e1c framework component ho\u1eb7c web component. \u0110\u00e2y kh\u00f4ng ch\u1ec9 l\u00e0 h\u1ecdc c\u00fa ph\u00e1p, m\u00e0 c\u00f2n l\u00e0 l\u00e0m quen v\u1edbi l\u1ed1i t\u01b0 duy m\u1edbi, v\u00e0 c\u00f3 th\u1ec3 l\u00e0m ch\u1eadm th\u1eddi gian ph\u00e1t tri\u1ec3n \u1edf l\u00fac b\u1eaft \u0111\u1ea7u.<\/li><li>L\u00e0m ph\u1ee9c t\u1ea1p d\u1ef1 \u00e1n: CSS-in-JS s\u1ebd \u0111\u01b0a th\u00eam m\u1ed9t layer v\u00e0o front-end stack. \u0110i\u1ec1u n\u00e0y \u0111\u00f4i khi kh\u00f4ng c\u1ea7n thi\u1ebft \u1edf c\u00e1c d\u1ef1 \u00e1n \u0111\u01a1n gi\u1ea3n.<\/li><li>Code t\u01b0\u01a1ng \u0111\u1ed1i kh\u00f3 \u0111\u1ecdc n\u1ebfu trong team c\u00f3 nh\u1eefng th\u00e0nh vi\u00ean ch\u01b0a l\u00e0m quen v\u1edbi CSS-in-JS tr\u01b0\u1edbc \u0111\u00f3. M\u1eb7t kh\u00e1c, \u0111\u00f4i khi vi\u1ec7c debug c\u0169ng tr\u1edf n\u00ean kh\u00f3 kh\u0103n \u0111\u1ed1i v\u1edbi newbie.<\/li><\/ul>\n\n\n\n<p>T\u00f3m l\u1ea1i, n\u00ean d\u1ef1a v\u00e0o nhi\u1ec1u y\u1ebfu t\u1ed1 nh\u01b0 th\u00e0nh vi\u00ean trong team, t\u00ednh ch\u1ea5t d\u1ef1 \u00e1n, th\u1eddi gian ph\u00e1t tri\u1ec3n \u0111\u1ec3 \u0111\u01b0a ra quy\u1ebft \u0111\u1ecbnh c\u00f3 n\u00ean d\u00f9ng CSS-in-JS hay kh\u00f4ng. C\u00e1c b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o s\u00e2u h\u01a1n v\u1ec1 ch\u1ee7 \u0111\u1ec1 n\u00e0y <a href=\"https:\/\/medium.com\/free-code-camp\/the-tradeoffs-of-css-in-js-bee5cf926fdb\" target=\"_blank\" rel=\"noopener\">t\u1ea1i \u0111\u00e2y<\/a> nh\u00e9!<\/p>\n\n\n<h2>\u0110\u00f4i n\u00e9t v\u1ec1 th\u01b0 vi\u1ec7n Styled-components<\/h2>\n\n\n<p>\u1ede ph\u1ea7n n\u00e0y, ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 Styled-components &#8211; th\u01b0 vi\u1ec7n CSS-in-JS \u0111ang \u0111\u01b0\u1ee3c y\u00eau th\u00edch nh\u1ea5t. Styled-component m\u1eb7c \u0111\u1ecbnh h\u1ed7 tr\u1ee3 React component, nh\u01b0ng c\u0169ng c\u00f3 phi\u00ean b\u1ea3n <a href=\"https:\/\/github.com\/styled-components\/vue-styled-components\" target=\"_blank\" rel=\"noopener\">d\u00e0nh cho Vue<\/a>. Trong ph\u1ea1m vi b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh ch\u1ec9 l\u1ea5y v\u00ed d\u1ee5 React th\u00f4i nh\u00e9!<\/p>\n\n\n<h2>C\u00e1ch c\u00e0i \u0111\u1eb7t Styled-components<\/h2>\n\n\n<p>Styled-components c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t b\u1eb1ng npm ho\u1eb7c yarn:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code># with npm\nnpm install styled-components\n\n# with yarn\nyarn add styled-components<\/code><\/pre><\/div>\n\n\n\n<p>V\u00e0 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng trong d\u1ef1 \u00e1n nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import styled from &#39;styled-components&#39;;<\/code><\/pre><\/div>\n\n\n<h2>C\u00e1ch s\u1eed d\u1ee5ng Styled-components<\/h2>\n\n\n<p>B\u00ean d\u01b0\u1edbi l\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Styled-components c\u01a1 b\u1ea3n \u0111\u1ec3 t\u1ea1o ki\u1ec3u cho m\u1ed9t button:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import styled from &quot;styled-components&quot;;\n\nconst StyledButton = styled.button`\n  background: white;\n  color: teal;\n\n  font-size: 2em;\n  margin: 1em;\n  padding: 0.25em 1em;\n  border: 2px solid teal;\n  border-radius: 3px;\n`;\n\nfunction App() {\n  return (\n    &lt;div className=&quot;App&quot;&gt;\n      &lt;StyledButton&gt;Marketenterprise Vietnam&lt;\/StyledButton&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre><\/div>\n\n\n\n<p>V\u1edbi \u0111o\u1ea1n m\u00e3 tr\u00ean th\u00ec ch\u00fang ta c\u00f3 \u0111\u01b0\u1ee3c m\u1ed9t <code>functional component<\/code> c\u00f3 t\u00ean l\u00e0 <code>StyledButton<\/code> v\u00e0 component n\u00e0y s\u1ebd render ra th\u1ebb <code>button<\/code>. Nh\u01b0ng so v\u1edbi c\u00e1ch th\u00f4ng th\u01b0\u1eddng th\u00ec v\u1edbi c\u00e1ch vi\u1ebft khi s\u1eed d\u1ee5ng Styled-components n\u00e0y, style s\u1ebd \u0111\u01b0\u1ee3c vi\u1ebft lu\u00f4n b\u00ean trong component. Component <code>StyledButton<\/code> t\u1ea1o ra ho\u00e0n to\u00e0n gi\u1ed1ng c\u00e1c component b\u1eb1ng c\u00e1ch t\u1ea1o b\u00ecnh th\u01b0\u1eddng, s\u1ebd c\u00f3 children, props truy\u1ec1n v\u00e0o, ch\u1ec9 kh\u00e1c m\u1ed9t \u0111i\u1ec3m l\u00e0 ch\u00fang ta \u0111\u01b0\u1ee3c vi\u1ebft style b\u00ean trong n\u00f3.<\/p>\n\n\n<h2>C\u00e1ch s\u1eed d\u1ee5ng props v\u1edbi Styled-components<\/h2>\n\n\n<p>Nh\u01b0 v\u1eeba n\u00f3i \u1edf tr\u00ean, m\u1ed9t component t\u1ea1o ra t\u1eeb Styled-components c\u0169ng c\u00f3 props nh\u01b0 component th\u00f4ng th\u01b0\u1eddng. Ch\u1ec9nh s\u1eeda \u0111o\u1ea1n code tr\u00ean tr\u1edf th\u00e0nh nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const StyledButton = styled.button`\n  background: ${(props) =&gt; (props.primary ? &quot;teal&quot; : &quot;white&quot;)};\n  color: ${(props) =&gt; (props.primary ? &quot;white&quot; : &quot;teal&quot;)};\n\n  font-size: 2em;\n  margin: 0.5em;\n  padding: 0.25em 1em;\n  border: 2px solid teal;\n  border-radius: 3px;\n`;\n\nfunction App() {\n  return (\n    &lt;div className=&quot;App&quot;&gt;\n      &lt;StyledButton&gt;Marketenterprise Vietnam&lt;\/StyledButton&gt;\n      &lt;StyledButton primary&gt;Styled components&lt;\/StyledButton&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre><\/div>\n\n\n\n<p>\u1ede button th\u1ee9 nh\u1ea5t: kh\u00f4ng c\u00f3 props <code>primary<\/code> n\u00ean nh\u1eadn c\u00e1c property <code>backgroud: white;<\/code> v\u00e0 <code>color: teal;<\/code><\/p>\n\n\n\n<p>\u1ede button th\u1ee9 hai: c\u00f3 props <code>primary<\/code> n\u00ean s\u1ebd nh\u1eadn c\u00e1c property <code>backgroud: teal;<\/code> v\u00e0 <code>color: white;<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pseudo-elements, pseudo-selectors v\u00e0 nesting<\/h2>\n\n\n\n<p>Styles b\u00ean trong component h\u1ed7 tr\u1ee3 c\u00fa ph\u00e1p t\u01b0\u01a1ng t\u1ef1 c\u00fa ph\u00e1p SCSS \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng x\u1eed l\u00fd c\u00e1c style l\u1ed3ng nhau. Khi \u0111\u00f3, k\u00fd t\u1ef1 <code>&amp;<\/code> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh component hi\u1ec7n t\u1ea1i:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const StyledButton = styled.button`\n  background: ${(props) =&gt; (props.primary ? &quot;teal&quot; : &quot;white&quot;)};\n  color: ${(props) =&gt; (props.primary ? &quot;white&quot; : &quot;teal&quot;)};\n\n  font-size: 2em;\n  margin: 0.5em;\n  padding: 0.25em 1em;\n  border: 2px solid teal;\n  border-radius: 3px;\n\n  &:hover {\n    opacity: 0.8;\n    cursor: pointer;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${StyledButton} {\n    filter: grayscale(0.8);\n  }\n`;\n\nfunction App() {\n  return (\n    &lt;Container className=&quot;App&quot;&gt;\n      &lt;StyledButton&gt;Marketenterprise Vietnam&lt;\/StyledButton&gt;\n      &lt;StyledButton primary&gt;Styled components&lt;\/StyledButton&gt;\n    &lt;\/Container&gt;\n  );\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Styling b\u1ea5t c\u1ee9 component n\u00e0o<\/h2>\n\n\n\n<p>C\u00f9ng theo d\u00f5i v\u00ed d\u1ee5 sau:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const Link = ({ className, children }) =&gt; (\n  &lt;a className={className}&gt;{children}&lt;\/a&gt;\n);\n\nconst StyledLink = styled(Link)`\n  color: teal;\n  font-size: 2rem;\n  text-decoration: teal;\n  padding: 0.25rem 2rem;\n  border: 1px solid teal;\n`;\n\nfunction App() {\n  return (\n    &lt;Container className=&quot;App&quot;&gt;\n\t\t\t&lt;Link&gt;This is link&lt;\/Link&gt;\n      &lt;br \/&gt;\n      &lt;StyledLink&gt;This is Link&lt;\/StyledLink&gt;\n    &lt;\/Container&gt;\n  );\n}<\/code><\/pre><\/div>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, component <code>Link<\/code> ch\u1ec9 tr\u1ea3 v\u1ec1 m\u1ed9t th\u1ebb <code>a<\/code> v\u00e0 kh\u00f4ng c\u00f3 b\u1ea5t c\u1ee9 style n\u00e0o. Component <code>StyledLink<\/code> &#8220;k\u1ebf th\u1eeba&#8221; component <code>Link<\/code> v\u00e0 override style v\u00e0 c\u00f3 kh\u1ea3 n\u0103ng override c\u00e1c attribute c\u1ee7a <code>Link<\/code> .<\/p>\n\n\n\n<p>Ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda <code>StyledLink<\/code> l\u1ea1i m\u1ed9t ch\u00fat \u0111\u1ec3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng props d\u1ec5 d\u00e0ng h\u01a1n:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const StyledLink = styled((props) =&gt; &lt;Link size=&quot;large&quot; {...props} \/&gt;)`\n  color: teal;\n\n  text-decoration: teal;\n  border: 1px solid teal;\n\n  font-size: ${(props) =&gt; (props.size === &quot;large&quot; ? &quot;2rem&quot; : &quot;1rem&quot;)};\n  padding: ${(props) =&gt;\n    props.size === &quot;large&quot; ? &quot;1rem 4rem&quot; : &quot;0.25rem 2rem&quot;};\n`;\n\nfunction App() {\n  return (\n    &lt;Container className=&quot;App&quot;&gt;\n      &lt;Link&gt;This is link&lt;\/Link&gt;\n      &lt;br \/&gt;\n      &lt;StyledLink&gt;This is StyledLink&lt;\/StyledLink&gt;\n      &lt;br \/&gt;\n      &lt;StyledLink size=&quot;large&quot;&gt;This is Large Link&lt;\/StyledLink&gt;\n    &lt;\/Container&gt;\n  );\n}<\/code><\/pre><\/div>\n\n\n\n<p>\u0110o\u1ea1n code tr\u00ean cho ph\u00e9p style l\u1ea1i m\u1ed9t component v\u00e0 cho ph\u00e9p truy\u1ec1n props, \u0111\u1ed3ng th\u1eddi styling dynamic theo props truy\u1ec1n v\u00e0o. C\u1ef1c k\u1ef3 linh ho\u1ea1t nh\u1ec9!<\/p>\n\n\n<h2>C\u00e1ch s\u1eed d\u1ee5ng Styled-components n\u00e2ng cao<\/h2>\n\n\n<p>Tr\u00ean \u0111\u00e2y ch\u00fang ta \u0111\u00e3 c\u00f9ng d\u00f9ng th\u1eed m\u1ed9t v\u00e0i t\u00ednh n\u0103ng c\u01a1 b\u1ea3n c\u1ee7a Styled-components. R\u1ea5t th\u00fa v\u1ecb v\u00e0 m\u1ea1nh m\u1ebd \u0111\u00fang kh\u00f4ng n\u00e0o! C\u00e1c b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam r\u1ea5t nhi\u1ec1u t\u00ednh n\u0103ng hay ho kh\u00e1c c\u1ee7a th\u01b0 vi\u1ec7n n\u00e0y t\u1ea1i trang ch\u1ee7 c\u1ee7a Styled-components <a href=\"https:\/\/styled-components.com\" target=\"_blank\" rel=\"noopener\">t\u1ea1i \u0111\u00e2y<\/a> nh\u00e9!<\/p>\n\n\n<h2>K\u1ebft lu\u1eadn<\/h2>\n\n\n<p>T\u00f3m l\u1ea1i, c\u00e1c th\u01b0 vi\u1ec7n CSS-in-JS l\u00e0 tuy l\u00e0 m\u1ed9t ch\u1ee7 \u0111\u1ec1 nh\u1ea1y c\u1ea3m v\u00e0 g\u00e2y nhi\u1ec1u tranh c\u00e3i, nh\u01b0ng kh\u00f4ng th\u1ec3 ph\u1ee7 nh\u1eadn, n\u00f3 \u0111\u00e3 \u0111\u01b0a k\u1ef9 thu\u1eadt modules h\u00f3a CSS l\u00ean b\u01b0\u1edbc ph\u00e1t tri\u1ec3n ti\u1ebfp theo. N\u1ed5i b\u1eadt trong s\u1ed1 \u0111\u00f3 l\u00e0 Styled-components &#8211; m\u1ed9t th\u01b0 vi\u1ec7n CSS-in-JS c\u1ef1c k\u1ef3 linh ho\u1ea1t v\u00e0 m\u1ea1nh m\u1ebd.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n \u0111ang g\u1eb7p v\u1ea5n \u0111\u1ec1 v\u1edbi c\u00e1ch t\u1ed5 ch\u1ee9c CSS trong v\u1edbi \u1ee9ng d\u1ee5ng SPA c\u1ee7a m\u00ecnh, h\u00e3y th\u1eed c\u00e2n nh\u1eafc t\u1edbi vi\u1ec7c d\u00f9ng Styled-components nh\u00e9. Bi\u1ebft \u0111\u00e2u b\u1ea1n c\u0169ng s\u1ebd s\u1edbm tr\u1edf h\u00e0nh fan nh\u01b0 m\u00ecnh v\u1eady \ud83d\ude01<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Link tham kh\u1ea3o<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Styled-components docs: <a href=\"https:\/\/styled-components.com\" target=\"_blank\" rel=\"noopener\">https:\/\/styled-components.com<\/a><\/li><li>Why CSS-in-JS awesome: <a href=\"https:\/\/mxstbr.com\/thoughts\/css-in-js\/\" target=\"_blank\" rel=\"noopener\">https:\/\/mxstbr.com\/thoughts\/css-in-js\/<\/a><\/li><li>CSS in JS: Benefits, Drawbacks, and Tooling: <a href=\"https:\/\/medium.com\/object-partners\/css-in-js-benefits-drawback-and-tooling-80286b03f9aa\" target=\"_blank\" rel=\"noopener\">CSS in JS: Benefits, Drawbacks, and Tooling<\/a><\/li><li>The tradeoffs of CSS-in-JS: <a href=\"https:\/\/www.freecodecamp.org\/news\/the-tradeoffs-of-css-in-js-bee5cf926fdb\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.freecodecamp.org\/news\/the-tradeoffs-of-css-in-js-bee5cf926fdb\/<\/a><\/li><li>CSS evolution: <a href=\"https:\/\/medium.com\/@perezpriego7\/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b\" target=\"_blank\" rel=\"noopener\">https:\/\/medium.com\/@perezpriego7\/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta c\u00f9ng t\u00ecm hi\u1ec3u l\u1eddi gi\u1ea3i cho c\u00e2u h\u1ecfi tr\u00ean v\u00e0 c\u00fang ti\u1ebfp c\u1eadn m\u1ed9t th\u01b0 vi\u1ec7n CSS-in-JS r\u1ea5t \u0111\u01b0\u1ee3c y\u00eau th\u00edch l\u00e0 Style-components \u0111\u1ec3 th\u1ea5y \u0111\u01b0\u1ee3c s\u1ee9c m\u1ea1nh to l\u1edbn c\u1ee7a ch\u00fang nh\u00e9!<\/p>\n","protected":false},"author":24,"featured_media":1673,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[4,81,82,34],"class_list":["post-1659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-blog","tag-css","tag-js","tag-marketenterprise-vietnam"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/1659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=1659"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/1659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/1673"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=1659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=1659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=1659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}