{"id":5732,"date":"2022-09-11T13:04:31","date_gmt":"2022-09-11T13:04:31","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5732"},"modified":"2022-09-11T13:05:14","modified_gmt":"2022-09-11T13:05:14","slug":"enhance-css-for-styling-react-components-using-styled-component","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/","title":{"rendered":"Enhance CSS for styling React components using Styled-Component"},"content":{"rendered":"\n

Styled-components is a new & better way that lets you write actual CSS in your JavaScript. You can still use all the features of CSS you use and love. Styled-components is compatible with ReactJS (for web) and React Native (for mobile) meaning it’s the perfect choice even for universal apps!<\/p>\n\n\n\n

In this blog, we will explore how to use Styled-Component in our projects. To get it installed using yarn: <\/p>\n\n\n\n

yarn add styled-components<\/code><\/pre>\n\n\n\n
Using NPM:<\/p>\n\n\n\n
npm install --save styled-components<\/code><\/pre>\n\n\n\n
Styled-components utilize tagged template literals to style components. Most important feature of styled-components is that it removes the mapping between styles and components. This means that when you are defining styles, we are creating a normal React component with styles.<\/p>\n\n\n\n
In the example below we created two components with styles attached to them. Title component with H1 tag & styles, Content component with section tag & styles.<\/p>\n\n\n\n
import styled from 'styled-components';<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Now you would be wondering how can we change the styles of components based on any condition. Styled component made it very easy to implement conditional styling based on props. To check conditions you can pass a function (“interpolations”) to a styled component’s template literal to adapt it based on its props.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Next, in some scenarios you might want to use the same component with slight changes in style, you can achieve it by interpolated function conditional rendering as mentioned above, another easy way is to make a new component with inherits the styling of others.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
There are tons of other ways as well to create a styled component. You can find complete documentation here<\/a>. <\/p>\n\n\n\n
React Native<\/h4>\n\n\n\n
In react-native default way of styling components is using StyleSheet<\/code> API. Styled-components can also be used with React Native in the same way and with the same import, we did for ReactJS. Expo<\/a> also supports this library.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Thanks for reading, have you tried styled-components before, or are you planning to use it? Don\u2019t forget to share your thoughts in the comment section!<\/p>\n","protected":false},"excerpt":{"rendered":"
Styled-components is a new & better way that lets you write actual CSS in your JavaScript. You can still use all the features of CSS you use and love. Styled-components is compatible with ReactJS (for web) and React Native (for mobile) meaning it’s the perfect choice even for universal apps! In this blog, we will … Continue reading “Enhance CSS for styling React components using Styled-Component”<\/span><\/a><\/p>\n","protected":false},"author":9,"featured_media":5747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[47,50],"tags":[60,32,63,61,62,59,64],"class_list":["post-5732","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","category-react-native","tag-css","tag-react-native","tag-reactjs","tag-scss","tag-stylesheet","tag-styling","tag-ui-ux"],"acf":[],"yoast_head":"\nEnhance CSS for styling React components using Styled-Component - Mobile App Development Services<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhance CSS for styling React components using Styled-Component - Mobile App Development Services\" \/>\n<meta property=\"og:description\" content=\"Styled-components is a new & better way that lets you write actual CSS in your JavaScript. You can still use all the features of CSS you use and love. Styled-components is compatible with ReactJS (for web) and React Native (for mobile) meaning it’s the perfect choice even for universal apps! In this blog, we will … Continue reading "Enhance CSS for styling React components using Styled-Component"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-11T13:04:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-11T13:05:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2386\" \/>\n\t<meta property=\"og:image:height\" content=\"1338\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"msaqlain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"msaqlain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\"},\"author\":{\"name\":\"msaqlain\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73\"},\"headline\":\"Enhance CSS for styling React components using Styled-Component\",\"datePublished\":\"2022-09-11T13:04:31+00:00\",\"dateModified\":\"2022-09-11T13:05:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\"},\"wordCount\":330,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png\",\"keywords\":[\"css\",\"react-native\",\"reactjs\",\"scss\",\"stylesheet\",\"styling\",\"UI-UX\"],\"articleSection\":[\"App Development\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\",\"name\":\"Enhance CSS for styling React components using Styled-Component - Mobile App Development Services\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png\",\"datePublished\":\"2022-09-11T13:04:31+00:00\",\"dateModified\":\"2022-09-11T13:05:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png\",\"width\":2386,\"height\":1338},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhance CSS for styling React components using Styled-Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73\",\"name\":\"msaqlain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g\",\"caption\":\"msaqlain\"},\"description\":\"A hardworking and dedicated individual, determined on the road to success, ever ready to take on challenges and accomplish what I set out to achieve.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/msaqlain\/\",\"noc\"],\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/msaqlain\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Enhance CSS for styling React components using Styled-Component - Mobile App Development Services","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/","og_locale":"en_US","og_type":"article","og_title":"Enhance CSS for styling React components using Styled-Component - Mobile App Development Services","og_description":"Styled-components is a new & better way that lets you write actual CSS in your JavaScript. You can still use all the features of CSS you use and love. Styled-components is compatible with ReactJS (for web) and React Native (for mobile) meaning it’s the perfect choice even for universal apps! In this blog, we will … Continue reading \"Enhance CSS for styling React components using Styled-Component\"","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/","og_site_name":"Mobile App Development Services","article_published_time":"2022-09-11T13:04:31+00:00","article_modified_time":"2022-09-11T13:05:14+00:00","og_image":[{"width":2386,"height":1338,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png","type":"image\/png"}],"author":"msaqlain","twitter_card":"summary_large_image","twitter_misc":{"Written by":"msaqlain","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/"},"author":{"name":"msaqlain","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73"},"headline":"Enhance CSS for styling React components using Styled-Component","datePublished":"2022-09-11T13:04:31+00:00","dateModified":"2022-09-11T13:05:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/"},"wordCount":330,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png","keywords":["css","react-native","reactjs","scss","stylesheet","styling","UI-UX"],"articleSection":["App Development","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/","name":"Enhance CSS for styling React components using Styled-Component - Mobile App Development Services","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png","datePublished":"2022-09-11T13:04:31+00:00","dateModified":"2022-09-11T13:05:14+00:00","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-11-at-6.00.50-PM-1.png","width":2386,"height":1338},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/enhance-css-for-styling-react-components-using-styled-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Enhance CSS for styling React components using Styled-Component"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73","name":"msaqlain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g","caption":"msaqlain"},"description":"A hardworking and dedicated individual, determined on the road to success, ever ready to take on challenges and accomplish what I set out to achieve.","sameAs":["https:\/\/www.linkedin.com\/in\/msaqlain\/","noc"],"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/msaqlain\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5732"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5732"}],"version-history":[{"count":2,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5732\/revisions"}],"predecessor-version":[{"id":5750,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5732\/revisions\/5750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5747"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}