{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/beginners-guide-to-styled-components/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CodeVertiser"}},"mdx":{"id":"11797773-25ad-517f-bcb9-84f3ead46d51","excerpt":"If you are following my articles, you might have noticed “Styled Components” in them. I am implementing styled-components in all my recent projects because I…","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"A Beginners Guide to Styled Components\",\n  \"published\": true,\n  \"description\": \"Once you have started using Styled Components with React, you won't like to go back to SCSS\",\n  \"category\": \"Styled Components\",\n  \"tags\": \"style, css, webdev\",\n  \"cover_image\": \"./Beginners-Guide-to-Styled-Components.png\",\n  \"date\": \"2022-06-22\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"If you are following my articles, you might have noticed \\u201CStyled Components\\u201D in them. I am implementing styled-components in all my recent projects because I like their customization.\"), mdx(\"p\", null, \"I thought to share all my styled components \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"configs\"), \" with you so that you can use them in your web apps and personalize them according to your aesthetics.\"), mdx(\"p\", null, \"I will keep updating this guide from time to time. Feel free to incorporate them into your projects.\"), mdx(\"p\", null, \"So, let us start this guide with 3 benefits of styled-components.\"), mdx(\"h2\", null, \"3 Real benefits of Styled Components over SCSS?\"), mdx(\"p\", null, \"Once you have started using Styled Components with React, you won't like to go back to SCSS.\"), mdx(\"p\", null, \"Here I found 3 real benefits of styled-components over CSS frameworks.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"1. I found theming is a lot easier and maintainable with styled components.\")), mdx(\"p\", null, \"We just have to wrap our app in theme provider, provided by styled components, pass our theme object in it, and get via props wherever we want in our app.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"630px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c8218db66382bf8b704315e246ce9159/73caa/theming.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"81.0126582278481%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACQUlEQVQ4y52Uy27bMBBF8/+/YzuSKCdB9911k6Bp2jhxLJmiSPEpkTJvQflRp3CApouDEQjh4A4HnKuSEE/KEqQoYlEUKEgBQsinKcty4oqUpU8Hy9vbeHP7BXc3d1gul5/mKL5KCXNCQO/vY/P2Fd/bR1jjoLWE1gpK6wmjDLTSUEqdkCr9o8E5R57nB2FZ+izP0b5V0fEGnZEIzsNYD9t7eNNjcD30oOG8wziOJ3bjDnEXYa3F9fX1vuWSlD4vctTrbRQ/JAzTYFuFp3WPVzpguzEQXGFb1+AtR2c7dKYD1xxU0qkKKZBl2bHlvbB6riL7RkHfOjxVDqtHCUYlXrctnpsXvFQrrOoVHuoHrPkaQgu0qoW0EkqrM+HUcgZa0WiogVUGvHNoeA+rNEyjYK0BN/tESZKq6x3GsG/dGLNvmZRnwg2NZqPQUIfXZsCaeXDTQ1oLbhyGYcC4i5Mk+ADv/XTmgz8J/yTMMrRtG61wEM8UZsvghMTQKQydhOECigtY1kJqfZIlQggfCBmLIUbQagP26ydo00CLFlZ2cEkqFZwQ0Mb+m5AxFl0/gCmBqqvAdAuqGnRWIowjfAjw44gQDq0epBeFeZajquvoR48wBoy7dNlhEh1lx0R/cznhYSiOWRhuoGoF0xoMXYe+YeiFmBJNKVM943zK74T1po5JpoWCYgpaaJh0dy2fhpJewyWcc5BSvhemLbNYLOJ8Mcc5s3mqi4nZbPYh8/l8esv7bUOITx+EkPg/a+t8faWEvwFVUnb9ZKNgEQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"theming\",\n    \"title\": \"theming\",\n    \"src\": \"/static/c8218db66382bf8b704315e246ce9159/f058b/theming.png\",\n    \"srcSet\": [\"/static/c8218db66382bf8b704315e246ce9159/c26ae/theming.png 158w\", \"/static/c8218db66382bf8b704315e246ce9159/6bdcf/theming.png 315w\", \"/static/c8218db66382bf8b704315e246ce9159/f058b/theming.png 630w\", \"/static/c8218db66382bf8b704315e246ce9159/40601/theming.png 945w\", \"/static/c8218db66382bf8b704315e246ce9159/73caa/theming.png 1110w\"],\n    \"sizes\": \"(max-width: 630px) 100vw, 630px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"This much simple. We will talk more in theme section.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"2. Conditional and Dynamic styling is simpler, we write less CSS utilizing props.\")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"630px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7a12fbb07fc477a2da8a856d508be1e1/52576/dynamic-styling.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"68.35443037974683%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAABnElEQVQ4y52U227aQBBA+f/vAXF/wpRCCnnuY6uUSzCxvdfZXeBUNmmTNKkEsXQ0trRzPDO7dmswGNDt9en1enS73U9R59ae4XBIazweM59O+PJ1ynw+v5nFYsFsNmuENa1sMsU/fGdjfiAxEm8ghMDxeKQsS/r9/qXCSTbBWo+tDEopvPeEcFl8De+EWZZhigKz3mD3eyrl2BwCyggpxtuF0yxDW4dZb7EPv7BFyfYQyAvfJMRX0utankzQRhODkESIIviQCDG9kX00BgnyH2GlMcqhtENri1WKqiyx1hFTalpPMVxiOjYvSjE1nI6nfzclwxw0u8ecn/ucxyLnsN2y3iieKkusSiotKBuprCbXOdZbClOwq3a44N5XWJfuosOKwUeHEcFKIogQjMFawfmIE492Gi++kSqrkCgftayQssLvc8zhCXH1hggigjTzkmee5ycvMaVEURSvj82U4IWj0iSlOTnPOSWuuc6cm2itfRGORiO+3d2xXC5Z3t9fWK0uz1ewWq2az++vsL7pdDq0a9rtT1Hn//k5/AbqS/hQbx2WiwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"dynamic styling\",\n    \"title\": \"dynamic styling\",\n    \"src\": \"/static/7a12fbb07fc477a2da8a856d508be1e1/f058b/dynamic-styling.png\",\n    \"srcSet\": [\"/static/7a12fbb07fc477a2da8a856d508be1e1/c26ae/dynamic-styling.png 158w\", \"/static/7a12fbb07fc477a2da8a856d508be1e1/6bdcf/dynamic-styling.png 315w\", \"/static/7a12fbb07fc477a2da8a856d508be1e1/f058b/dynamic-styling.png 630w\", \"/static/7a12fbb07fc477a2da8a856d508be1e1/40601/dynamic-styling.png 945w\", \"/static/7a12fbb07fc477a2da8a856d508be1e1/78612/dynamic-styling.png 1260w\", \"/static/7a12fbb07fc477a2da8a856d508be1e1/52576/dynamic-styling.png 1412w\"],\n    \"sizes\": \"(max-width: 630px) 100vw, 630px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"3. I don\\u2019t have to worry about giving a unique class name to a parent element, overlap styling, and misspellings, styled-components do it for me behind the scene.\")), mdx(\"h2\", null, \"What should be the Folder Structure of styled-components?\"), mdx(\"p\", null, \"Folder structuring is very important for every project's scalability. The bad folder structure can make managing the project difficult. For styled components, I have created the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"styles\"), \" folder inside \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \". I keep all the styles here. It has four main files.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"1. Theme.js\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"2. Global.js\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"3. Breakpoints.js\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"4. Fonts.module.css\")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"246px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/6513982e409ced3ce333086ff62f5f5d/92252/folder-structure-styled-components.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"260.7594936708861%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA0CAYAAACKJRg7AAAACXBIWXMAABYlAAAWJQFJUiTwAAAHOUlEQVRYw5WXSY8cxxGF+Rt8M0RyuvY9M6uy9up9X2ZImtRiy7YsybBhGD745othQL/8M6qGw+keNiXqkMhe0K9fxIt4EfUs8H2iMCLXmiLLSKVCSYUQkqqqyDNNKiVKCCzTpNQFoR9SFSUijpGJxHMctNJEQcCzSGqKbs7vv/uB13dfcbp9x+pwS7M68v3f/8Ht2z/w6s07lpsDLyyX9eY1Op+w3NxSlh2T5QGRFpxO3yBEyjM7n+KnFYGumX+1JpvNCLIGUU3w05owb4nLjqSaEOUtjizwVDnc7tntyhxDNTzzdItIElKt+Ou/XrPczMm0pmpqyqqmG48ZT8ZMpjPyXBOEIWEUXZwgiojCAEuWPLNEQRSEhEmC9acKNa+YjxecDrdoXWCYFpbtYFk2tu3gOB6O4z45Hq7tMAqze0DfdXF9n+kPK7r1jLpomE3nKJUOQOc/7kHPjzPcLo5lvQdMcuIwIhGSF7cBUROyrBWGYQzsHkA+ZnV/TMtGiRgtI1766p5hL7sfhNjjAKX7LxNc18N1/V8E7L/zPA/fdbgJe5VFges4xEJxLDveHu8omo79/sDxcEscRR/CHkJ7Avbh84eQbVHi2jae5xNFMbM6Y1rn5EU1FHYYhIMoP8fQ7l/b9iOgY1uEYYzjR/y4a/nzYUHVzbg9HhB9hzwR5iPQAfAJwz6Hkesjbreo05Y0kUMdxnH8szm8Cti/CaKY0Paov3vH5C/fUKYFs9mMJI4u1L4Gfp1hXzpeQPrlEf3uRFc2TGdzVqsNSRyfCfMrAF3TIf/md7RfvyIVitlswXyxGMrCNK0zVZ1fArSIhWY7Tvjpjy/RqmB3OLLZ7lkt1xyOe17dvRqq4JpAVxl6fohMIlYzRRQnZJmmrpvBF5MkIY7vi/2zQu5rSPaOM91y+Od/KYqK7e7Am9vXg+HejIwzc/iskG2CMCYVEZt5iVIZaaopy2pw8/PC/kxRLKJIMm0UX317oKrHbDZbVuvNRev9isK2iBJJLRK+bxUqzem6MU3T3Lee9Stbrwf0o4QuCfh3F1BXHYfNkeV8SRAEH/Xy01wO96M59G7jDp6YTXfIb/+DrxPEtibq5PWcnefUsglETCQjbno//CCKHyB0Tbb7mkAlyElOrAWud+bSV5Tu797tPc9lFDz44Xv7evnSYlX9hmlnEM8b9L6luJui9w3ZpiHbNYQ6wTKsS4YyJlLxA8P3gH6AZZjoxZZsMiFII+IqJUwTwjQm1IK4UvgiGhg5ziNDLwwIQp+bC4Z+iPn8t1Tf/Y/6y78RNxH60CGnBem6QZ868lM3MJXTfBhOFzn8iKHnY1kumTJR0sJXcmDUMwzSBNty7o99f1/MlCDAD7wnDD0fw3CZj22axiXqqiFn6bJGLWtc93Km2GcM/eRC5UdA03RpK5uq8ojqHFGnJE1GXKohb1dLyHLw44ggDj5mODJcmtJGawezd5ixRkxy0kWFF/gXoZ4DumGIfw7oOTam5ZGlDvuNwaTJebdrOfS16PsYN+ajCE9YjgyLcZUxr1O+8OQjw74f+zyl0iaVMdMmpSslQfAQ6gPQJWDf53EUIiKfl+cMR4bHam7z47fPqbsFp7s3rFa7wblPp+Mw/a7tOf1tmDamYTKKskdAy/JIlcN8YiKFYNxUZEoiRDK49qfcujeOfpVLLgq7B7Q9kthhtTCYVJJ324o3+4ZloxiNzE8a7JDDWrNoM75w5ZkotouKPeaVP/hh3bRondM2DVEUDTXYs7wWcs/SNs/sq9+++rUsTxWH1YwirzkeD8PmsN1shnnz/MVLRiNjOIZhfhDqAdR9NNjHkOPYYTkboZRmsVgwHk9YLlfsNjvWmx2b1Yr5bEnT1Bfb2BPHPs9h3ykWUqYs5vNh+2ralnE3oawaxm3LdDqnbdv37K7OlEeVo9hmvzbIi5rNdsdmvWO93rJcLJjNpkMOb25GGMblFnF1Lvf/1qqITNpIlVHV9TDo+4Gv9f1I9f3giSifGFKWZeHbNj9tZ9Qy4/T6LW9v37Bfb9hv98Oy1DO7YHW2iT0ZUiW2ZeJ6PkWmhikncoWqNbJMCWWC5/vDIPvU5Bv80P/ghyW2aQ7hdE2Jm0SIbUOybZD7lmRWYAU+o5E1tNjoLH8PfuglEcH51LMtC89xKfviDkPaQjKtUlotaLUc3ndlSq0FTSHxztrQNG20EpRpzItLQI/C8SiV4DAvWE8L7jYNiyZjUqdsZiV3q5rtPMf3LgHzVFBlyceAjeuhk4jdrODY/3hasBxrNpOCSSm5GVmMDPsi5D4NVa7oCslz7wywT7p0XLKkf7RQ1Llg2WkWnWZcSnIV3bfYE1H6lpUiJhPh/ZPUB4aeR6F8cp1ze3zFdn3ksDux2R+YLba048kQ3jWlTcsZZvpjYVv3m4DnuoPaIhZIoRCJGLZXkchhHf65Pce9ePCxrKHaH4q1d+Z+Se/v+2N99lPA/wFs2TIcrjswjwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"folder structure styled components\",\n    \"title\": \"folder structure styled components\",\n    \"src\": \"/static/6513982e409ced3ce333086ff62f5f5d/92252/folder-structure-styled-components.png\",\n    \"srcSet\": [\"/static/6513982e409ced3ce333086ff62f5f5d/c26ae/folder-structure-styled-components.png 158w\", \"/static/6513982e409ced3ce333086ff62f5f5d/92252/folder-structure-styled-components.png 246w\"],\n    \"sizes\": \"(max-width: 246px) 100vw, 246px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Let us discuss them one by one.\"), mdx(\"h2\", null, \"Theming\"), mdx(\"p\", null, \"While working with styled-components I have noticed theming is a lot easier in styled components. You just need to create a theme object and define all your colors and other configs there like fonts, padding, margins, etc.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"export const theme = {\\n  colors: {\\n    primary: '#FAFAFA',\\n    secondary: '#FFC80A',\\n    tertiary: '#303030',\\n    background: '#ffffff',\\n    text: '#000000',\\n    primaryTextColor: '#594F43',\\n    secondaryTextColor: '#777777',\\n    inputPlaceholder: '#C7C7C7',\\n    darkGrayText: '#303030',\\n    darkText: '#1A1A1A',\\n    black: '#000000',\\n    white: '#ffffff',\\n    dark: '',\\n    medium: '',\\n    light: '',\\n    danger: '',\\n    success: '#66A15A',\\n  },\\n  fonts: {\\n    poppins: 'Poppins',\\n  },\\n  paddings: {\\n    container: '15px',\\n    pageTop: '30px',\\n  },\\n  margins: {\\n    pageTop: '30px',\\n  },\\n}\\n\")), mdx(\"h3\", null, \"How to use theme\"), mdx(\"p\", null, \"Import \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ThemeProvider\"), \" from styled-components that takes a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props\"), \" theme. Now, get all the theme properties to the components wrapped inside \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ThemeProvider\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import styled, { ThemeProvider } from 'styled-components'\\nimport { GlobalStyles } from './styles/Global'\\nimport { theme } from './styles/Theme'\\n\\nconst Title = styled.h1`\\n  color: ${(props) => props.theme.colors.primaryTextColor};\\n`\\n\\nfunction App() {\\n  return (\\n    <ThemeProvider theme={theme}>\\n      <GlobalStyles />\\n      <Title>Hello World!</Title>\\n    </ThemeProvider>\\n  )\\n}\\n\\nexport default App\\n\")), mdx(\"h2\", null, \"2. Global.js | Global Styles\"), mdx(\"p\", null, \"In global styles, we reset all the default styling.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"import styled, { createGlobalStyle, css } from 'styled-components'\\nimport { device } from './BreakPoints'\\nimport fontsCss from './fonts.module.css'\\n\\nexport const GlobalStyles = createGlobalStyle`\\n ${fontsCss} // this works as a normal styled css\\n\\n/* Box sizing rules */\\n*,\\n*::before,\\n*::after {\\n  box-sizing: border-box;\\n}\\n\\nhtml {\\n  font-size: 100%;\\n}\\n\\nbody {\\n  margin: 0;\\n  padding: 0;\\n  overflow-x: hidden;\\n  min-height: 100vh;\\n  text-rendering: optimizeSpeed;\\n  font-family: ${({ theme }) => theme.fonts.poppins}, sans-serif;\\n  font-size: 1rem;\\n  color: ${({ theme }) => theme.colors.text};\\n  background-color: ${({ theme }) => theme.colors.background};\\n  line-height: 1;\\n  position: relative;\\n}\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nul,\\nfigure,\\nblockquote,\\ndl,\\ndd {\\n  padding: 0;\\n  margin: 0;\\n}\\nbutton {\\n  border: none;\\n  background-color: transparent;\\n  font-family: inherit;\\n  padding: 0;\\n  cursor: pointer;\\n}\\n/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\\nul[role=\\\"list\\\"],\\nol[role=\\\"list\\\"] {\\n  list-style: none;\\n}\\nli {\\n  list-style-type: none;\\n}\\n/* Set core root defaults */\\nhtml:focus-within {\\n  scroll-behavior: smooth;\\n}\\n/* A elements that don't have a class get default styles */\\na:not([class]) {\\n  text-decoration-skip-ink: auto;\\n}\\n\\n/* Make images easier to work with */\\nimg,\\npicture {\\n  max-width: 100%;\\n  display: block;\\n}\\n\\n/* Inherit fonts for inputs and buttons */\\ninput,\\nbutton,\\ntextarea,\\nselect {\\n  font: inherit;\\n}\\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\\n@media (prefers-reduced-motion: reduce) {\\n  html:focus-within {\\n    scroll-behavior: auto;\\n  }\\n\\n  *,\\n  *::before,\\n  *::after {\\n    animation-duration: 0.01ms !important;\\n    animation-iteration-count: 1 !important;\\n    transition-duration: 0.01ms !important;\\n    scroll-behavior: auto !important;\\n  }\\n}\\n`\\n\")), mdx(\"h2\", null, \"3. Breakpoints.js\"), mdx(\"p\", null, \"Breakpoints are the points at which the website content adjusts to the device width, allowing you to present the best possible layout to the user. In the given code, I have used \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-width\"), \" if you like you can change it to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"min-width\"), \" and play with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"breakpoints\"), \" values as per your need.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const size = {\\n  xs: '400px', // for small screen mobile\\n  sm: '600px', // for mobile screen\\n  md: '900px', // for tablets\\n  lg: '1280px', // for laptops\\n  xl: '1440px', // for desktop / monitors\\n  xxl: '1920px', // for big screens\\n}\\n\\nexport const device = {\\n  xs: `(max-width: ${size.xs})`,\\n  sm: `(max-width: ${size.sm})`,\\n  md: `(max-width: ${size.md})`,\\n  lg: `(max-width: ${size.lg})`,\\n  xl: `(max-width: ${size.xl})`,\\n  xxl: `(max-width: ${size.xxl})`,\\n}\\n\")), mdx(\"h3\", null, \"How to use breakpoint\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import styled, { ThemeProvider } from 'styled-components'\\nimport { device } from './styles/BreakPoints'\\nimport { theme } from './styles/Theme'\\n\\nconst Title = styled.h1`\\n  color: ${(props) => props.theme.colors.primaryTextColor};\\n  font-size: 48px;\\n  @media ${device.md} {\\n    font-size: 32px;\\n  }\\n`\\n\\nfunction App() {\\n  return (\\n    <ThemeProvider theme={theme}>\\n      <Title>Hello world</Title>\\n    </ThemeProvider>\\n  )\\n}\\n\\nexport default App\\n\")), mdx(\"p\", null, \"I learned this technique from \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Mario Kandut\"), \" this \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.mariokandut.com/how-to-use-media-queries-in-styled-components/\"\n  }, \"article\")), mdx(\"h2\", null, \"4. Fonts.module.css\"), mdx(\"p\", null, \"I have downloaded fonts in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ttf\"), \" format and added them to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"assets/fonts\"), \" folder.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-Black.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 900;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-ExtraBold.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 800;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-Bold.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 700;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-SemiBold.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 600;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 500;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 400;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-Light.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 300;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-ExtraLight.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 200;\\n}\\n@font-face {\\n  font-family: 'Poppins';\\n  src: url('../assets/fonts/Poppins-Thin.ttf') format('truetype');\\n  font-style: normal;\\n  font-weight: 100;\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"JS\"), \" file for fonts was reloading on every activity on the screen. We used a \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"CSS\"), \" file for fonts to fix this issue.\")), mdx(\"h2\", null, \"Reusable Styled Components\"), mdx(\"p\", null, \"Here, I have added some reusable \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"styled components\"), \" to use in multiple places in my project.\"), mdx(\"h3\", null, \"1. Container\"), mdx(\"p\", null, \"The container component of styled components is similar to the container in bootstrap, material UI, and other CSS frameworks.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const Container = styled.div`\\n  width: 100%;\\n  max-width: 1360px;\\n  margin: 0 auto;\\n  padding: 0 ${({ theme }) => theme.paddings.container};\\n  ${({ medium }) =>\\n    medium &&\\n    css`\\n      max-width: 1200px;\\n    `}\\n  ${({ small }) =>\\n    small &&\\n    css`\\n      max-width: 1100px;\\n    `}\\n`\\n\")), mdx(\"h3\", null, \"2. Grid\"), mdx(\"p\", null, \"Grids are implemented by only wrapping its children inside and passing the props.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const Grid = styled.div`\\n  display: grid;\\n  grid-template-columns: repeat(${({ columns }) => columns || 2}, 1fr);\\n  justify-items: ${({ end }) => end && 'end'};\\n  grid-column-gap: calc(${({ cgp }) => cgp} * 1px);\\n  ${({ pt }) =>\\n    pt &&\\n    css`\\n      padding-top: calc(${pt} * 1px);\\n    `}\\n  ${({ pb }) =>\\n    pb &&\\n    css`\\n      padding-bottom: calc(${pb} * 1px);\\n    `}\\n  ${({ fullHeight }) =>\\n    fullHeight &&\\n    css`\\n      height: 100%;\\n    `}\\n  ${({ py }) =>\\n    py &&\\n    css`\\n      padding-top: calc(${py}* 1px);\\n      padding-bottom: calc(${py}* 1px);\\n    `}\\n`\\n\")), mdx(\"h3\", null, \"3. Box\"), mdx(\"p\", null, \"Box component makes development faster. If we have an independent \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button\"), \" component and want to give it \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"margin\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align\"), \" it on screen, we put it in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \" the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \".\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Box Component\"), \" replaces this process, by wrapping the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button component\"), \" inside the box and passing the related props.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const Box = styled.div`\\n  margin-top: calc(${({ mt }) => mt} * 1px);\\n  ${({ flxRight }) =>\\n    flxRight &&\\n    css`\\n      display: flex;\\n      justify-content: flex-end;\\n    `}\\n  ${({ smNone }) =>\\n    smNone &&\\n    css`\\n      ${SmallDevicesHidden}\\n    `}\\n`\\n\")), mdx(\"h2\", null, \"Utility Classes in Styled Components\"), mdx(\"p\", null, \"Utility classes are not like components. They behave like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mixins\"), \", we have in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SCSS\"), \".\"), mdx(\"p\", null, \"We import \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" from styled-components. We call utility classes inside styled components and reduce a couple of lines of code and development time.\"), mdx(\"h3\", null, \"How to use Utility Classes\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import styled from 'styled-components'\\nimport { device } from 'styles/BreakPoints'\\nimport { FlxCenter } from 'styles/Global'\\n\\nconst CardStyle = styled.nav`\\n  display: flex;\\n  justify-content: space-between;\\n  @media ${device.md} {\\n    ${FlxCenter}\\n  }\\n`\\n\")), mdx(\"h3\", null, \"Horizontally and vertically center an element using flexbox\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"export const FlxCenter = css`\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n`\\n\")), mdx(\"h3\", null, \"For absolute center\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"export const AbsCenter = css`\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n`\\n\")), mdx(\"h3\", null, \"Hide for small devices\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"export const SmallDevicesHidden = css`\\n  @media ${device.sm} {\\n    display: none;\\n  }\\n`\\n\")), mdx(\"p\", null, \"I hope this starter guide has helped you understand styled components in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ReactJS\"), \".\"), mdx(\"p\", null, \"You can access these codes from this \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/AbdulBasit313/styled-components-guide\"\n  }, \"GitHub Repository\"), \". Moreover, if you like the information provided in the repository. consider giving it a star on GitHub. \\uD83D\\uDE09\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"A Beginners Guide to Styled Components","date":"June 22, 2022","description":"Once you have started using Styled Components with React, you won't like to go back to SCSS","cover_image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACJ0lEQVQoz32TzU8TQRiH91/yL/DkUQ8eTExATh48Gr1oojf1YIxQQMRATJQQEykCHgSRmkgQKVBLu+yWlsWFlm1py9L9bmniY3ZaSBHj4Zc3887MM+/XSJ5l4ttHhPZEYt32BZ5F83edWr7Ayv0InuNytBljP3KV0nAPxaGuM5J8u4ZnHQrIiQQ0hNVdSkqWzel5lMXvrH1eoNlsYBsaxdGbFAevt6HdlF52t4CuWSbwnDMRCqBTo6RniY+MELv3hOjdR+iKwrFv47kutrbegvVf42D4BsaLLiojPUjq7GsqWvoc1LVM8gszFOfeobx5xeLQKI7TLk2tih8EWOoS1fHbrD24zETPRb7duYS0Ee0lVDmXFNAw1YZnC9X1DJa8iqsmMI1dmnWP4/ZeYJt4jkPDt0iMRRi9coFPD28hpacHSU1GkGeGsMt5nJrJ9paCtqXwS8sJGYU9jD2djJxiJ5uhmNcxyyUB9R1LNNBIx3EOD5BSH/oJocn3z9hdncNzLNR0kp9rK3z9MkcqsUpyPS588eUlEvEfZJU0R5USgXPSUJNGPRB1bwGnBpCn+pE/DuNUDfK6Rk7dFFGG0WxnFNT0BrlM6FMp6Fob1jFytUNhJXlqgPVoH7Hxp8TePkZenqWwr1M9KHDsO+Ji3bVaNQ2ta1H/C9Y5clIYXXIyQnyil8TEc7bmx0RjxOH2q/9S52c4AzxNeXpA2I1oH5Ud+dwYdV76n/4A0VwH6VglupsAAAAASUVORK5CYII=","aspectRatio":1.8691588785046729,"src":"/static/eebbb3cb7d406a2e95c78f4abce985c5/ee604/Beginners-Guide-to-Styled-Components.png","srcSet":"/static/eebbb3cb7d406a2e95c78f4abce985c5/69585/Beginners-Guide-to-Styled-Components.png 200w,\n/static/eebbb3cb7d406a2e95c78f4abce985c5/497c6/Beginners-Guide-to-Styled-Components.png 400w,\n/static/eebbb3cb7d406a2e95c78f4abce985c5/ee604/Beginners-Guide-to-Styled-Components.png 800w","sizes":"(max-width: 800px) 100vw, 800px"}}}}},"previous":{"fields":{"slug":"/editable-text-field-in-table-using-reactjs/"},"frontmatter":{"title":"How To Create An Editable Text Field In Table Using ReactJS"}},"next":null},"pageContext":{"id":"11797773-25ad-517f-bcb9-84f3ead46d51","previousPostId":"7c2ba397-3798-54f4-bfbe-568c6991e420","nextPostId":null}},
    "staticQueryHashes": ["4202924991"]}