{"id":12012,"date":"2021-11-08T09:22:08","date_gmt":"2021-11-08T08:22:08","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=12012"},"modified":"2023-06-01T11:29:53","modified_gmt":"2023-06-01T09:29:53","slug":"react-stylowanie-komponentow-za-pomoca-styled-components","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/","title":{"rendered":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components"},"content":{"rendered":"\n<p>Jest kilka podej\u015b\u0107 do dodawania styl\u00f3w CSS w projektach reactowych \u2013 mo\u017cna korzysta\u0107 z tzw. sk\u00f3rek (Themes), modu\u0142\u00f3w (CSS Modules) lub dowolnych bibliotek temu s\u0142u\u017c\u0105cych np. styled-components. I w\u0142a\u015bnie to rozwi\u0105zanie chc\u0119 wam przedstawi\u0107 w poni\u017cszym artykule.<\/p>\n\n\n\n<p>Styled-components powsta\u0142o z my\u015bl\u0105 o \u0142atwym i u\u017cytecznym sposobie stylowania element\u00f3w HTML-a i opiera si\u0119 na podej\u015bciu CSS-in-JS, wed\u0142ug kt\u00f3rego szablon powinien by\u0107 \u015bci\u015ble zwi\u0105zany z JavaScriptem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instalacja styled-components<\/h2>\n\n\n\n<p>Zacznijmy od podstaw, czyli instalacji biblioteki. Zadanie to jest naprawd\u0119 proste. Styled-components funkcjonuje jako:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pakiet dost\u0119pny w repozytorium <em>npm<\/em>, wi\u0119c dodajemy go do projektu za pomoc\u0105 domy\u015blnego polecenia: <em>npm install \u2013 save styled-components.<\/em><\/li>\n\n\n\n<li>Polecenie, z kt\u00f3rego mog\u0105 skorzysta\u0107 u\u017cytkownicy yarna: <em>yarn add styled-components.<\/em><\/li>\n<\/ul>\n\n\n\n<p>A teraz \u2013 do dzie\u0142a ?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak dzia\u0142aj\u0105 styled-components<\/h2>\n\n\n\n<p>Aby style CSS mog\u0142y mie\u0107 zastosowanie, musz\u0105 by\u0107 w jaki\u015b spos\u00f3b powi\u0105zane z elementami w kodzie. W zwi\u0105zku z tym mo\u017cna zada\u0107 wszystkim akapitom <em>(&lt;p&gt;&lt;\/p&gt;)&nbsp;<\/em>&nbsp;czerwony kolor font\u00f3w. To co istotne \u2013 je\u015bli mamy kilka takich element\u00f3w na stronie, to nadanie tej w\u0142a\u015bciwo\u015bci bez rozr\u00f3\u017cnienia element\u00f3w (np. poprzez unikalne nazwy klas), zmieni kolor globalnie.<\/p>\n\n\n\n<p>Poza zastosowaniem odpowiednich atrybut\u00f3w, style CSS mo\u017cna doda\u0107 liniowo (inline). W\u00f3wczas wybranemu elementowi HTML-a dodajemy atrybut <em>styles<\/em>, a jego w\u0142a\u015bciwo\u015bciami b\u0119d\u0105 style CSS. Przyk\u0142adowo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12014\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1.png\"><img decoding=\"async\" width=\"638\" height=\"53\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1.png\" alt=\"Stylowanie inline w styled-components\" class=\"wp-image-12014\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1.png 638w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1-300x25.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 1 Stylowanie inline<\/figcaption><\/figure>\n\n\n\n<p>Styled-components dzia\u0142a w\u0142a\u015bnie w oparciu o style inline. Przyjrzyjmy si\u0119 poni\u017cszemu fragmentowi kodu:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12015\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2.png\"><img decoding=\"async\" width=\"621\" height=\"623\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2.png\" alt=\"Przyk\u0142ad komponentu z wdro\u017conym styled-components\" class=\"wp-image-12015\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2.png 621w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2-300x300.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2-90x90.png 90w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 Przyk\u0142ad komponentu z wdro\u017conym styled-components<\/figcaption><\/figure>\n\n\n\n<p>We wskazanym kodzie wyst\u0119puje <strong>klasa reactowa<\/strong> o nazwie <strong>App<\/strong>. Sama struktura jest do\u015b\u0107 prosta \u2013 jeden <strong>kontener<\/strong> o nazwie <strong>Wrapper<\/strong> i jego dzieci: <strong>nag\u0142\u00f3wek oraz komponent<\/strong> <strong>TextField<\/strong> (zawieraj\u0105cy elementy label oraz input). Wrapper, tak naprawd\u0119, jest divem.<\/p>\n\n\n\n<p>W jaki spos\u00f3b mo\u017cemy mu nada\u0107 style CSS wykorzystuj\u0105c omawian\u0105 bibliotek\u0119? U\u017cywamy do tego interpolacji string\u00f3w, okre\u015blaj\u0105c poszczeg\u00f3lne w\u0142asno\u015bci CSS z wykorzystaniem domy\u015blnej metody styled. Ca\u0142o\u015b\u0107 tworzy wspomniany komponent.<\/p>\n\n\n\n<p>W praktyce, po uruchomieniu projektu w przegl\u0105darce, otrzymujemy wyrenderowan\u0105, tradycyjn\u0105 struktur\u0119 HTML wraz z automatycznie nadanymi klasami, kt\u00f3re zawieraj\u0105 nasze style:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12016\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3.png\"><img decoding=\"async\" width=\"744\" height=\"218\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3.png\" alt=\"Struktura HTML w konsoli przegl\u0105darki\" class=\"wp-image-12016\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3.png 744w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3-300x88.png 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Struktura HTML w konsoli przegl\u0105darki<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12017\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4.png\"><img decoding=\"async\" width=\"510\" height=\"506\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4.png\" alt=\"Style CSS w konsoli przegl\u0105darki\" class=\"wp-image-12017\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4.png 510w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4-300x298.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4-90x90.png 90w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 Style CSS w konsoli przegl\u0105darki<\/figcaption><\/figure>\n\n\n\n<p>Zestaw w\u0142asno\u015bci nie jest jednak przechowywany w odr\u0119bnym pliku za\u0142\u0105czanym do projektu, a zostaje jedynie wy\u015bwietlony liniowo wewn\u0105trz atrybutu <em>style<\/em> i umieszczony w nag\u0142\u00f3wku strony:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12018\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5.png\"><img decoding=\"async\" width=\"1004\" height=\"376\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5.png\" alt=\"Przyk\u0142ad za\u0142\u0105czonych liniowo styli CSS w kodzie \u017ar\u00f3d\u0142owym\" class=\"wp-image-12018\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5.png 1004w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5-300x112.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5-768x288.png 768w\" sizes=\"(max-width: 1004px) 100vw, 1004px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 5 Przyk\u0142ad za\u0142\u0105czonych liniowo styli CSS w kodzie \u017ar\u00f3d\u0142owym<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wykorzystanie w\u0142a\u015bciwo\u015bci komponentu<\/h2>\n\n\n\n<p>Biblioteka styled-components pozwala r\u00f3wnie\u017c na dynamiczne stylowanie element\u00f3w poprzez wykorzystanie w\u0142a\u015bciwo\u015bci komponentu (props). Przyk\u0142adowo, mo\u017cemy przekaza\u0107 w\u0142a\u015bciwo\u015b\u0107 <em>border<\/em>, kt\u00f3rej warto\u015b\u0107 jest przes\u0142ana do metody <em>styled<\/em> jako kolor obramowania (border-color).<\/p>\n\n\n\n<p>Dodatkowo, biblioteka pozwala na wykorzystanie metody \u0142a\u0144cuchowej <em><strong>attrs<\/strong><\/em>, umo\u017cliwiaj\u0105cej dodanie atrybut\u00f3w komponentowi. Metoda ta jako argument przyjmuje element props, a jego w\u0142asno\u015bci mog\u0105 zosta\u0107 u\u017cyte do definiowania warto\u015bci parametr\u00f3w.<\/p>\n\n\n\n<p>Oba rozwi\u0105zania zosta\u0142y zaprezentowane na poni\u017cszym przyk\u0142adzie:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12019\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6.png\"><img decoding=\"async\" width=\"765\" height=\"606\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6.png\" alt=\"Przyk\u0142ad wykorzystania metody \u0142a\u0144cuchowej \u201eattrs\u201d\" class=\"wp-image-12019\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6.png 765w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6-300x238.png 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 6 Przyk\u0142ad wykorzystania metody \u0142a\u0144cuchowej \u201eattrs\u201d<\/figcaption><\/figure>\n\n\n\n<p>Wi\u0119cej na temat API biblioteki i jej mo\u017cliwo\u015bci mo\u017cecie przeczyta\u0107 <a href=\"https:\/\/styled-components.com\/docs\/api\" rel=\"nofollow\" >na oficjalnej stronie<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wykorzystanie styled-components w projekcie z TypeScriptem<\/h2>\n\n\n\n<p>Dzi\u0119ki swojemu community (community w rozumieniu u\u017cytkownik\u00f3w danego rozwi\u0105zania og\u00f3lnie. Im wi\u0119cej os\u00f3b liczy, tym \u0142atwiej o wsparcie m.in. w rozwi\u0105zywaniu problem\u00f3w. Styled-components mo\u017ce i nie jest najpopularniejszym rozwi\u0105zaniem, niemniej w miejscach takich jak np. GitHub lub Stackoverflow znajdziemy wiele wskaz\u00f3wek i odpowiedzi na nasze potencjalne pytania), mamy dost\u0119p do przygotowanych definicji dla projekt\u00f3w reactowych. Wystarczy dodatkowo zainstalowa\u0107 paczk\u0119 <em>@types\/styled-components<\/em> lub w przypadku React Native <em>@types\/styled-componenst @types\/styled-components-react-native.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zalety i wady korzystania ze styled-components<\/h2>\n\n\n\n<p>Jak ka\u017cde narz\u0119dzie, tak\u017ce to rozwi\u0105zanie cechuje si\u0119 silniejszymi i s\u0142abszymi elementami.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pozytywne aspekty wykorzystywania biblioteki<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cho\u0107 style liniowe wydaj\u0105 si\u0119 ma\u0142o atrakcyjn\u0105 metod\u0105, szczeg\u00f3lnie dla os\u00f3b przyzwyczajonych do klas CSS-owych, to takie rozwi\u0105zanie eliminuje problem niepotrzebnego kodu. W ten spos\u00f3b nie dodajemy klas, kt\u00f3re po kolejnych zmianach czy poprawkach w kodzie, czasami nie s\u0105 ju\u017c nam potrzebne.<\/li>\n\n\n\n<li>Ponadto, styled-components automatycznie generuje prefiksy dla przegl\u0105darek. Pozwala nam to na swobodne korzystanie z najnowszych rozwi\u0105za\u0144 CSS-owych, kt\u00f3re niekoniecznie s\u0105 w pe\u0142ni wspierane przez cz\u0119\u015b\u0107 przegl\u0105darek.<\/li>\n\n\n\n<li>Biblioteka ta r\u00f3wnie\u017c tworzy unikalne nazwy klas dla element\u00f3w, dzi\u0119ki czemu nie musimy si\u0119 martwi\u0107 np. o duplikaty nazw czy liter\u00f3wki.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Obawy zwi\u0105zane z wykorzystywaniem biblioteki<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jedn\u0105 z obaw mo\u017ce by\u0107 niepewno\u015b\u0107 dotycz\u0105ca przysz\u0142o\u015bci. Je\u017celi wsparcie dla biblioteki zostanie wycofane lub je\u015bli tw\u00f3rcy w og\u00f3le porzuc\u0105 projekt, to wprowadzanie zmian do naszych rozwi\u0105za\u0144 mo\u017ce wymaga\u0107 wi\u0119kszej przebudowy.<\/li>\n\n\n\n<li>Wa\u017cnym aspektem jest r\u00f3wnie\u017c niezbyt du\u017ce community, w zwi\u0105zku z czym trudniej jest wyszuka\u0107 b\u0142\u0119dy i problemy, z kt\u00f3rymi si\u0119 w danym momencie mierzymy. Otrzymanie skutecznej pomocy r\u00f3wnie\u017c mo\u017ce by\u0107 wi\u0119kszym wyzwaniem.<\/li>\n<\/ul>\n\n\n\n<p>Niemniej, styled-components nadal s\u0105 warte wypr\u00f3bowania przy projektach reactowych ze wzgl\u0119du na wygod\u0119 i \u0142atwo\u015b\u0107 tworzenia dynamicznych styl\u00f3w zgodnie z metodyk\u0105 CSS-in-JS.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;12012&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;7&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;2&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components&quot;,&quot;width&quot;:&quot;159&quot;,&quot;_legend&quot;:&quot;{score}\\\/5&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 159px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            5\/5    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Jest kilka podej\u015b\u0107 do dodawania styl\u00f3w CSS w projektach reactowych \u2013 mo\u017cna korzysta\u0107 z tzw. sk\u00f3rek (Themes), modu\u0142\u00f3w (CSS Modules) &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/\">Continued<\/a><\/p>\n","protected":false},"author":317,"featured_media":12022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[188,991,1154],"class_list":["post-12012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-html","tag-react","tag-styled-components"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Weronika Szczypie\u0144\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"pl_PL\" \/>\n\t\t<meta property=\"og:site_name\" content=\"blogersii\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components\" \/>\n\t\t<meta property=\"og:description\" content=\"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t\t<meta property=\"og:image:height\" content=\"416\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2021-11-08T08:22:08+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-06-01T09:29:53+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Sii.Polska\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#article\",\"name\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\",\"description\":\"Styled-components powsta\\u0142o w celu \\u0142atwego i u\\u017cytecznego sposobu stylowania element\\u00f3w HTML. Opiera si\\u0119 na podej\\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.\",\"inLanguage\":\"pl-PL\",\"headline\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\",\"author\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/author\\\/weronika-szczypien\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/#organization\"},\"datePublished\":\"2021-11-08T08:22:08+01:00\",\"dateModified\":\"2023-06-01T09:29:53+02:00\",\"articleSection\":\"Development na twardo, HTML, React, Styled-components\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#webpage\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#articleImage\",\"width\":850,\"height\":416,\"caption\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sii.pl\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/development-na-twardo\\\/#listItem\",\"name\":\"Development na twardo\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/development-na-twardo\\\/#listItem\",\"position\":2,\"name\":\"Development na twardo\",\"item\":\"https:\\\/\\\/sii.pl\\\/blog\\\/development-na-twardo\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#listItem\",\"name\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#listItem\",\"position\":3,\"name\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/development-na-twardo\\\/#listItem\",\"name\":\"Development na twardo\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sii.pl\\\/#organization\",\"name\":\"Sii Polska\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/\",\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/siipolska\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@siipolska\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCQ3UQ7RJPEYnAWC_rPE5Dxg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/sii-polska\",\"https:\\\/\\\/clutch.co\\\/profile\\\/sii-poland\",\"https:\\\/\\\/www.crunchbase.com\\\/organization\\\/sii\",\"https:\\\/\\\/www.wikidata.org\\\/wiki\\\/Q16601096\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#webpage\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/\",\"name\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\",\"description\":\"Styled-components powsta\\u0142o w celu \\u0142atwego i u\\u017cytecznego sposobu stylowania element\\u00f3w HTML. Opiera si\\u0119 na podej\\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.\",\"inLanguage\":\"pl-PL\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#breadcrumblist\"},\"author\":\"https:\\\/\\\/sii.pl\\\/blog\\\/author\\\/weronika-szczypien\\\/#author\",\"creator\":\"https:\\\/\\\/sii.pl\\\/blog\\\/author\\\/weronika-szczypien\\\/#author\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#mainImage\",\"width\":850,\"height\":416,\"caption\":\"React. Stylowanie komponent\\u00f3w za pomoc\\u0105 styled-components\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/react-stylowanie-komponentow-za-pomoca-styled-components\\\/#mainImage\"},\"datePublished\":\"2021-11-08T08:22:08+01:00\",\"dateModified\":\"2023-06-01T09:29:53+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/\",\"name\":\"blogersii\",\"description\":\"Blog technologiczny Sii \\u2013 praktyczna wiedza od ekspert\\u00f3w\",\"inLanguage\":\"pl-PL\",\"publisher\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","description":"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.","canonical_url":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#article","name":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","description":"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.","inLanguage":"pl-PL","headline":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","author":{"@id":"https:\/\/sii.pl\/blog\/author\/weronika-szczypien\/#author"},"publisher":{"@id":"https:\/\/sii.pl\/#organization"},"datePublished":"2021-11-08T08:22:08+01:00","dateModified":"2023-06-01T09:29:53+02:00","articleSection":"Development na twardo, HTML, React, Styled-components","mainEntityOfPage":{"@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#webpage"},"isPartOf":{"@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#webpage"},"image":{"@type":"ImageObject","url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#articleImage","width":850,"height":416,"caption":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components"}},{"@type":"BreadcrumbList","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog#listItem","position":1,"name":"Home","item":"https:\/\/sii.pl\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/development-na-twardo\/#listItem","name":"Development na twardo"}},{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/development-na-twardo\/#listItem","position":2,"name":"Development na twardo","item":"https:\/\/sii.pl\/blog\/development-na-twardo\/","nextItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#listItem","name":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components"},"previousItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#listItem","position":3,"name":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","previousItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/development-na-twardo\/#listItem","name":"Development na twardo"}}]},{"@type":"Organization","@id":"https:\/\/sii.pl\/#organization","name":"Sii Polska","url":"https:\/\/sii.pl\/blog\/","sameAs":["https:\/\/www.instagram.com\/siipolska\/","https:\/\/www.tiktok.com\/@siipolska","https:\/\/www.youtube.com\/channel\/UCQ3UQ7RJPEYnAWC_rPE5Dxg","https:\/\/www.linkedin.com\/company\/sii-polska","https:\/\/clutch.co\/profile\/sii-poland","https:\/\/www.crunchbase.com\/organization\/sii","https:\/\/www.wikidata.org\/wiki\/Q16601096"]},{"@type":"WebPage","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#webpage","url":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/","name":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","description":"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.","inLanguage":"pl-PL","isPartOf":{"@id":"https:\/\/sii.pl\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#breadcrumblist"},"author":"https:\/\/sii.pl\/blog\/author\/weronika-szczypien\/#author","creator":"https:\/\/sii.pl\/blog\/author\/weronika-szczypien\/#author","image":{"@type":"ImageObject","url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png","@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#mainImage","width":850,"height":416,"caption":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components"},"primaryImageOfPage":{"@id":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/#mainImage"},"datePublished":"2021-11-08T08:22:08+01:00","dateModified":"2023-06-01T09:29:53+02:00"},{"@type":"WebSite","@id":"https:\/\/sii.pl\/blog\/#website","url":"https:\/\/sii.pl\/blog\/","name":"blogersii","description":"Blog technologiczny Sii \u2013 praktyczna wiedza od ekspert\u00f3w","inLanguage":"pl-PL","publisher":{"@id":"https:\/\/sii.pl\/#organization"}}]},"og:locale":"pl_PL","og:site_name":"blogersii","og:type":"article","og:title":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","og:description":"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.","og:url":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/","og:image":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png","og:image:secure_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png","og:image:width":850,"og:image:height":416,"article:published_time":"2021-11-08T08:22:08+00:00","article:modified_time":"2023-06-01T09:29:53+00:00","article:publisher":"https:\/\/www.facebook.com\/Sii.Polska","twitter:card":"summary","twitter:title":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","twitter:description":"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.","twitter:image":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png"},"aioseo_meta_data":{"post_id":"12012","title":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","description":"Styled-components powsta\u0142o w celu \u0142atwego i u\u017cytecznego sposobu stylowania element\u00f3w HTML. Opiera si\u0119 na podej\u015bciu CSS-in-JS. Opis wykorzystania, zalety i wady.","keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-64671ebc48a4f","slug":"article","graphName":"Article","label":"Article","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2021-11-04 08:30:51","updated":"2023-06-01 09:39:30","ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/sii.pl\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/sii.pl\/blog\/development-na-twardo\/\" title=\"Development na twardo\">Development na twardo<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tReact. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/sii.pl\/blog"},{"label":"Development na twardo","link":"https:\/\/sii.pl\/blog\/development-na-twardo\/"},{"label":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components","link":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/"}],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=12012"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12012\/revisions"}],"predecessor-version":[{"id":22130,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12012\/revisions\/22130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/12022"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=12012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=12012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=12012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}