{"componentChunkName":"component---src-templates-post-template-js","path":"/2020/02/06/globally-style-gatsby-styled-components/","result":{"data":{"mdx":{"frontmatter":{"title":"Globally Style the Gatsby Default Starter with styled-components v5","date":"2020 February 6th"},"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2020-02-06T00:00:00.000Z\",\n  \"title\": \"Globally Style the Gatsby Default Starter with styled-components v5\",\n  \"tags\": [\"information\", \"learning\", \"gatsby\", \"guide\", \"mdx\", \"markdown\"],\n  \"published\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar YouTube = makeShortcode(\"YouTube\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I\\u2019m going to go over globally styling the Gatsby Default Starter with\\nstyled-components v5, I\\u2019ve done this in the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/2018/11/29/gatsby-starter-to-styled-components/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"past with\\nstyled-components v4\"), \" but I\\u2019ve changed my approach and want to\\ndocument it.\"), mdx(\"p\", null, \"I\\u2019ll be swapping out the styles included with a CSS reset and adding\\nin global style with the styled-components \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createGlobalStyle\"), \" helper\\nfunction and also adding in the styled-components theme provider.\"), mdx(\"p\", null, \"To start I\\u2019ll make a new Gatsby project using npx:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"npx gatsby new gatsby-starter-styled-components\\n\")), mdx(\"h2\", {\n    \"id\": \"install-styled-components-dependencies\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-styled-components-dependencies\",\n    \"aria-label\": \"install styled components dependencies permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install styled-components dependencies\"), mdx(\"p\", null, \"I\\u2019m using yarn to install my dependencies, the backslash is to have\\nthe packages on multiple lines instead of one long line:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"yarn add gatsby-plugin-styled-components \\\\\\n  styled-components \\\\\\n  babel-plugin-styled-components \\\\\\n  styled-reset\\n\")), mdx(\"h2\", {\n    \"id\": \"configure-gatsby-plugin-styled-components-and-createglobalstyle\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#configure-gatsby-plugin-styled-components-and-createglobalstyle\",\n    \"aria-label\": \"configure gatsby plugin styled components and createglobalstyle permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Configure \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"gatsby-plugin-styled-components\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"createGlobalStyle\")), mdx(\"p\", null, \"Pop \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-styled-components\"), \" into the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"plugins\"), \" array:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"{2}\",\n    \"{2}\": true\n  }), \"  plugins: [\\n    `gatsby-plugin-styled-components`,\\n    `gatsby-plugin-react-helmet`,\\n    {\\n\")), mdx(\"p\", null, \"Now I\\u2019m going to create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"global-style.js\"), \" file in a new directory\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/theme\"), \" then import the styled-components helper function\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createGlobalStyle\"), \" into that, this is where the styles for the site\\nare going to live now.\"), mdx(\"p\", null, \"Create the dir and file with the terminal command:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"mkdir src/theme && touch src/theme/global-style.js\\n\")), mdx(\"p\", null, \"The base styles go in here, along with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"styled-reset\"), \".\"), mdx(\"p\", null, \"To start with I\\u2019ll create the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"GlobalStyle\"), \" object and add in the the\\nreset.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import { createGlobalStyle } from 'styled-components'\\nimport reset from 'styled-reset'\\n\\nexport const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n`\\n\")), mdx(\"h2\", {\n    \"id\": \"remove-current-styling\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#remove-current-styling\",\n    \"aria-label\": \"remove current styling permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Remove current styling\"), mdx(\"p\", null, \"Remove the current styling that is used in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Layout>\"), \" component,\\nit\\u2019s the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"import './layout.css'\"), \" line, I\\u2019ll also delete the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.css\"), \" file as I\\u2019m going to be adding in my styles.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{5}\",\n    \"{5}\": true\n  }), \"import { graphql, useStaticQuery } from 'gatsby'\\nimport PropTypes from 'prop-types'\\nimport React from 'react'\\nimport Header from './header'\\nimport './layout.css'\\n\")), mdx(\"p\", null, \"Now the site has the base browser default styles, time to add in my\\nown styles. Before that I\\u2019m going to confirm the reset is doing it\\nthing.\"), mdx(\"h2\", {\n    \"id\": \"confirm-css-reset\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#confirm-css-reset\",\n    \"aria-label\": \"confirm css reset permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Confirm CSS reset\"), mdx(\"p\", null, \"Now I have the base browser styles I\\u2019m going to confirm the CSS reset\\nin the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Layout>\"), \" component. This is where I\\u2019ve removed the previous\\nglobal styles (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.css\"), \") from.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{4,19}\",\n    \"{4,19}\": true\n  }), \"import { graphql, useStaticQuery } from \\\"gatsby\\\"\\nimport PropTypes from \\\"prop-types\\\"\\nimport React from \\\"react\\\"\\nimport { GlobalStyle } from \\\"../theme/global-style\\\"\\nimport Header from \\\"./header\\\"\\n\\nconst Layout = ({ children }) => {\\n  // static query for the data here\\n  return (\\n    <>\\n      <Header siteTitle={data.site.siteMetadata.title} />\\n      <div\\n        style={{\\n          margin: `0 auto`,\\n          maxWidth: 960,\\n          padding: `0 1.0875rem 1.45rem`,\\n        }}\\n      >\\n        <GlobalStyle />\\n        <main>{children}</main>\\n        <footer>\\n\")), mdx(\"p\", null, \"In the code example here \\uD83D\\uDC46I\\u2019ve I removed the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useStaticQuery\"), \" hook\\nfor readability.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/39c26fbeac89322ffc9491b0efa0ad13/573d3/reset-page.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.375%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'256\\\\'%20viewBox=\\\\'0%200%20400%20256\\\\'%20preserveAspectRatio=\\\\'none\\\\'%3e%3cpath%20d=\\\\'M0%2015v15h401V0H0v15m114%2056c-2%202-1%204%201%207%203%202%205%203%203%201v-2c2%200%203%203%202%203-2%201%208%206%2015%209%207%202%209%201%208-5%200-5-2-11-4-10l1%203%202%206v3l-3-3c-4-3-16-9-21-10-2%200-3%200-2-2h-2m-6%2018c-6%206-5%2016%204%2020s20-6%2016-16c-4-9-13-11-20-4m-34%207c-2%201-2%201%200%201l2%201-2%202c-1%201%200%201%204%201s5%200%204-1c-2%200-3-3-1-3%203%200%208%205%208%207a564%20564%200%20000%208c-1-6-2-8-7-9-11-4-20%207-13%2014%202%203%203%203%209%203s7%200%206%201c-4%202-13%201-16-2-3-4-4-11%200-14%201-2%202-3%200-4-1-2-6-1-4%200%201%201%200%202-1%203-3%202-3%207%200%2010%202%203%202%203%201%204l-1%201-1%201v2l-1%201h-2l1%201v1h-1l-2-1c-1%200-2-6-1-7v1h1c1-2%201-3-1-3-3%201-4%208-1%2012l1%203c-1%202-4-1-8-6l-3-3v1c2%201%200%203-2%203s-1%201%201%204c2%201%203%203%202%203l1%201h1v1h1v1c0-1%202%200%202%202%202%203%204%203%207%200l2-2%201%204%201%205-1-6c0-4%200-5%203-8l3-2v7l-1%208-1%202-1%202v1c2%202%205%201%205-2%200-2%200-2-1%200-1%201-1%201-1-1s3-3%206-2c3%200%202%204-1%205l-2%202%203%202c1%201%203%202%204%201%202-1%2010%208%2011%2013s0%2010-3%2015c-2%203-3%2011-1%2013%205%203%207%202%208-5l2-8%201-4%201-1c2%200%202-7%200-10l-4-10-2-5-2%202-4%202c-2%201-2%201-3-1%200-1%200-2%202-3l1-2c-2-2-1-7%201-7s2%201%202%203c0%204%202%205%204%203%202%200%202-1%201-1s-3-6-3-13v-5l3%205%203%206c-2%204-2%207-1%207l1-4c0-2%200-2%201-1l3%201v-1c-2-1-2-1-1-3s1-2%202-1v3c-1%202%201%201%206-4%206-6%206-7%203-7l-2-2c0-2-1-1-2%201-3%202-3%202-1%204l2%202-2-1c-3-2-3-2-3%200-2%203-3-2-3-7l-1-5v2c0%203%200%203-1%202-2-3-2-4%200-6v-1l-3-1c-1-2%201-3%207-5%203-1%203-1%201-1-3%200-3%200-3-4l-1-5v5l-1%205c-2%200-2-1-2-4%200-8-13-16-20-13m-3%2010c-2%202-3%203-1%203h1l-2%201v4l1%202c0%202%202%202%203%201l4-1h6c2%202%204%201%203-1v-1l2-2c0-2-1-2-4-2l-7-1c-2-1-4-2-5-1v-1h4c4%201%205%201%201-1s-4-2-6%200m35%206l-3%201-5%202c-2%201%201%204%205%204h4l-3-1c-6-1-1-2%2011-2s17%201%2011%202c-3%201-3%201%200%201%204%200%207-3%205-4l-3-1-4-2c-3-1-19-2-18%200m-36%2019v5c0%202%201%203%208%203h7v-3l-1-5c-2-2-13-1-14%200m-6%2021l-2%2011c-4%209-4%209-1%208%204-1%206%208%202%2010-3%202-4%200-4-5%200-3%200-3-1-2l-1%204c-1%201%200%209%201%2010l1-2v-2l1%203v2l1%202%201%204v5c-2%207%203%2012%208%208%203-2%204-10%201-13l-4-21%201-5%206-12%201-2h-1c-1%202-9-1-9-4-1-1-1%200-1%201\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/39c26fbeac89322ffc9491b0efa0ad13/60a22/reset-page.webp 160w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/4c812/reset-page.webp 320w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/0ba47/reset-page.webp 640w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/e46b2/reset-page.webp 960w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/af3f0/reset-page.webp 1280w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/44758/reset-page.webp 1650w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/39c26fbeac89322ffc9491b0efa0ad13/69538/reset-page.png 160w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/72799/reset-page.png 320w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/6af66/reset-page.png 640w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/d9199/reset-page.png 960w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/21b4d/reset-page.png 1280w\", \"/static/39c26fbeac89322ffc9491b0efa0ad13/573d3/reset-page.png 1650w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/39c26fbeac89322ffc9491b0efa0ad13/6af66/reset-page.png\",\n    \"alt\": \"reset page\",\n    \"title\": \"reset page\",\n    \"loading\": \"lazy\",\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  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Ok, cool, looks pretty reset to me!\"), mdx(\"h2\", {\n    \"id\": \"create-the-new-browser-base-styles\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#create-the-new-browser-base-styles\",\n    \"aria-label\": \"create the new browser base styles permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Create the new browser base styles\"), mdx(\"p\", null, \"Time to add in some more styles to the global style. First, the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"box-sizing\"), \" reset, take a look at the CSS Tricks post on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://css-tricks.com/box-sizing/#article-header-id-3\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Box Sizing\"), \"\\nfor a great explanation of why we do this.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{7-12}\",\n    \"{7-12}\": true\n  }), \"import { createGlobalStyle } from 'styled-components'\\nimport reset from 'styled-reset'\\n\\nexport const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n\\n  *, *:before, *:after {\\n    box-sizing: border-box;\\n  }\\n  html {\\n    box-sizing: border-box;\\n  }\\n`\\n\")), mdx(\"p\", null, \"Then I\\u2019m adding in the smooth scroll html property and some additional\\nstyles for base font size and colour along with base line height\\nletter spacing and background colour.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{12-15,17-21}\",\n    \"{12-15,17-21}\": true\n  }), \"import { createGlobalStyle } from 'styled-components'\\nimport reset from 'styled-reset'\\n\\nexport const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n\\n  *, *:before, *:after {\\n    box-sizing: border-box;\\n  }\\n  html {\\n    box-sizing: border-box;\\n    scroll-behavior: smooth;\\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\\n    font-size: 16px;\\n    color: '#1a202c';\\n  }\\n  body {\\n    line-height: 1.5;\\n    letter-spacing: 0;\\n    background-color: '#f7fafc';\\n  }\\n`\\n\")), mdx(\"h2\", {\n    \"id\": \"place-globalstyle-at-the-top-of-the-react-tree-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#place-globalstyle-at-the-top-of-the-react-tree-\",\n    \"aria-label\": \"place globalstyle at the top of the react tree  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Place \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"GlobalStyle\"), \" at the top of the React tree \\uD83C\\uDF33\"), mdx(\"p\", null, \"I\\u2019m adding this as high up the component tree as possible so that the\\nglobal styles will affect everything that is \\u2018underneath\\u2019 it.\"), mdx(\"p\", null, \"In the case of the Gatsby Default Starter you\\u2019ll notice that the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Layout>\"), \" component wraps a the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" page, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"page-2.js\"), \" and the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"404.js\"), \" page so adding the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<GlobalStyle />\"), \" component here is a\\nsound option.\"), mdx(\"p\", null, \"There is an alternative to adding it to the layout and that is to use\\nthe Gatsby Browser and Gatsby SSR API \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"wrapRootElement\"), \".\"), mdx(\"p\", null, \"If I add in the following code to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-browser.js\"), \" the styles are\\napplied.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React from 'react'\\nimport Layout from './src/components/layout'\\nimport { GlobalStyle } from './src/theme/global-style'\\n\\nexport const wrapRootElement = ({ element }) => (\\n  <>\\n    <GlobalStyle />\\n    <Layout>{element}</Layout>\\n  </>\\n)\\n\")), mdx(\"p\", null, \"I also have a double header, that\\u2019s because the layout component is\\nstill wrapping the index page, page 2 and the 404 page. I\\u2019ll remove\\nthe layout component from those locations so I have it in one place to\\nmanage.\"), mdx(\"h2\", {\n    \"id\": \"make-a-root-wrapper-to-keep-things-dry-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#make-a-root-wrapper-to-keep-things-dry-\",\n    \"aria-label\": \"make a root wrapper to keep things dry  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Make a Root Wrapper to keep things DRY \\uD83C\\uDF35\"), mdx(\"p\", null, \"I also need to add the same code into \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-ssr.js\"), \" so so that the\\nstyles are rendered on the server when the site is built.\"), mdx(\"p\", null, \"Rather than have the code duplicated in the two files I\\u2019ll create a\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"root-wrapper.js\"), \" file \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"(you can call it what you like!)\"), \" and add it\\nto the root of the project. I\\u2019ll import that into both the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-browser.js\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-ssr.js\"), \" files:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import { wrapRootElement as wrap } from './root-wrapper'\\n\\nexport const wrapRootElement = wrap\\n\")), mdx(\"h2\", {\n    \"id\": \"global-fonts-with-gatsby-plugin-google-fonts\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#global-fonts-with-gatsby-plugin-google-fonts\",\n    \"aria-label\": \"global fonts with gatsby plugin google fonts permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Global fonts with \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"gatsby-plugin-google-fonts\")), mdx(\"p\", null, \"Onto the main reason for this post, with the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://styled-components.com/releases#v5.0.0\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"v5 release\"), \" of\\nstyled-components the use of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@imports\"), \" in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createGlobalStyle\"), \" isn\\u2019t\\nworking, (that approach is \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/2018/11/29/gatsby-starter-to-styled-components/#3-global-style\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"detailed here\"), \") it\\u2019s recommended that you\\nembed these into your HTML index file, etc.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"NOTE: At this time we recommend not using @import inside of\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createGlobalStyle\"), \". We\\u2019re working on better behavior for this\\nfunctionality but it just doesn\\u2019t really work at the moment and it\\u2019s\\nbetter if you just embed these imports in your HTML index file, etc.\")), mdx(\"p\", null, \"But! As I\\u2019m using Gatsby, of course, \", mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"strong\", {\n    parentName: \"em\"\n  }, \"\\u201CThere\\u2019s a Plugin For\\nThat\\u2122\\uFE0F\\u201D\")), \" so I\\u2019m going to use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-google-fonts\"), \" for this,\\nI\\u2019m using this in place of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-web-font-loader\"), \" because it\\nuses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"display=swap\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"yarn add gatsby-plugin-google-fonts\\n\")), mdx(\"p\", null, \"Configure, I\\u2019ll add three fonts, sans, sans serif and monospace to the\\nGatsby plugin array in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"{\\n  resolve: `gatsby-plugin-google-fonts`,\\n  options: {\\n    fonts: [\\n      `cambay\\\\:400,700`,\\n      `arvo\\\\:400,700`,\\n      `ubuntu mono\\\\:400,700`,\\n    ],\\n    display: 'swap',\\n  },\\n},\\n\")), mdx(\"p\", null, \"I can now use these fonts throughout my site.\"), mdx(\"h2\", {\n    \"id\": \"styled-components-theme-provider\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#styled-components-theme-provider\",\n    \"aria-label\": \"styled components theme provider permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"styled-components Theme provider\"), mdx(\"p\", null, \"The \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://styled-components.com/docs/api#themeprovider\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"styled-components ThemeProvider\"), \" is a great solution for managing\\nyour styles throughout a project.\"), mdx(\"p\", null, \"Part of the inspiration for my approach came from Sid\\u2019s talk at React\\nAdvanced which \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/2019/11/06/react-advanced-london-2019/#siddharth-kshetrapal---design-systems-design-system\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"I wrote about\"), \" and part from watching the Tailwind CSS\\ncourses from Adam Wathan on Egghead.io check out the playlist here:\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://egghead.io/playlists/introduction-to-tailwind-and-the-utility-first-workflow-0b697b10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Introduction to Tailwind and the Utility first workflow\")), mdx(\"p\", null, \"With the ThemeProvider I can have things like colours, sizes, font\\nweights in one place so that there is a consistent set of presets to\\nchoose from when styling.\"), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"global-style.js\"), \" file I\\u2019m creating a theme object to hold all\\nthe values for the theme.\"), mdx(\"p\", null, \"For the font I\\u2019ll add in the types I defined in the Gatsby config, for\\nserif, sans serif and monospace.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{4-10}\",\n    \"{4-10}\": true\n  }), \"import { createGlobalStyle } from 'styled-components'\\nimport reset from 'styled-reset'\\n\\nexport const theme = {\\n  font: {\\n    sans: 'Cambay, sans-serif',\\n    serif: 'Arvo, sans',\\n    monospace: '\\\"Ubuntu Mono\\\", monospace',\\n  },\\n}\\n\\nexport const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n\\n  *, *:before, *:after {\\n    box-sizing: border-box;\\n  }\\n  html {\\n    box-sizing: border-box;\\n    scroll-behavior: smooth;\\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\\n    font-size: 16px;\\n    color: '#1a202c';\\n  }\\n  body {\\n    line-height: 1.5;\\n    letter-spacing: 0;\\n    background-color: '#f7fafc';\\n  }\\n`\\n\")), mdx(\"p\", null, \"Now I\\u2019ll need to add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<ThemeProvider>\"), \" high up in the React render\\ntree, same as with the global style, I\\u2019ll add it to the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"root-wrapper.js\"), \" file.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{2,4,7,10}\",\n    \"{2,4,7,10}\": true\n  }), \"import React from 'react'\\nimport { ThemeProvider } from 'styled-components'\\nimport Layout from './src/components/layout'\\nimport { GlobalStyle, theme } from './src/theme/global-style'\\n\\nexport const wrapRootElement = ({ element }) => (\\n  <ThemeProvider theme={theme}>\\n    <GlobalStyle />\\n    <Layout>{element}</Layout>\\n  </ThemeProvider>\\n)\\n\")), mdx(\"p\", null, \"When I want to pick a font type to use in the project I can use the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" object and pick out the desired type.\"), mdx(\"p\", null, \"Like setting the HTML font-family to sans serif:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{10}\",\n    \"{10}\": true\n  }), \"export const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n\\n  *, *:before, *:after {\\n    box-sizing: border-box;\\n  }\\n  html {\\n    box-sizing: border-box;\\n    scroll-behavior: smooth;\\n    font-family: ${({ theme }) => theme.font.sans};\\n    font-size: 16px;\\n    color: '#1a202c';\\n  }\\n  body {\\n    line-height: 1.5;\\n    letter-spacing: 0;\\n    background-color: '#f7fafc';\\n  }\\n`\\n\")), mdx(\"p\", null, \"The base font is now set to Cambay, why stop there though, I\\u2019ll bring\\nin some fonts sizes and font weights from the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/tailwindcss/designing-with-tailwindcss/blob/master/01-getting-up-and-running/07-customizing-your-design-system/tailwind-full.config.js\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Tailwind full config\"), \"\\nand add them to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" object.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{10-32,45}\",\n    \"{10-32,45}\": true\n  }), \"import { createGlobalStyle } from 'styled-components'\\nimport reset from 'styled-reset'\\n\\nexport const theme = {\\n  font: {\\n    sans: 'Cambay, sans-serif',\\n    serif: 'Arvo, sans',\\n    monospace: '\\\"Ubuntu Mono\\\", monospace',\\n  },\\n  fontSize: {\\n    xs: '0.75rem',\\n    sm: '0.875rem',\\n    base: '1rem',\\n    lg: '1.125rem',\\n    xl: '1.25rem',\\n    '2xl': '1.5rem',\\n    '3xl': '1.875rem',\\n    '4xl': '2.25rem',\\n    '5xl': '3rem',\\n    '6xl': '4rem',\\n  },\\n  fontWeight: {\\n    hairline: '100',\\n    thin: '200',\\n    light: '300',\\n    normal: '400',\\n    medium: '500',\\n    semibold: '600',\\n    bold: '700',\\n    extrabold: '800',\\n    black: '900',\\n  },\\n}\\n\\nexport const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n\\n  *, *:before, *:after {\\n    box-sizing: border-box;\\n  }\\n  html {\\n    box-sizing: border-box;\\n    scroll-behavior: smooth;\\n    font-family: ${({ theme }) => theme.font.sans};\\n    font-size: ${({ theme }) => theme.fontSize.lg};\\n    color: '#1a202c';\\n  }\\n  body {\\n    line-height: 1.5;\\n    letter-spacing: 0;\\n    background-color: '#f7fafc';\\n  }\\n`\\n\")), mdx(\"p\", null, \"I\\u2019ll add the base font at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".lg\"), \" (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"1.125rem\"), \"), I\\u2019ll also add in line\\nheight and line spacing defaults but I\\u2019ll save adding the whole config\\nhere to save you a codewall, you get the idea though, right?\"), mdx(\"p\", null, \"Here\\u2019s the rest of the GlobalStyle with defaults applied.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{12,15-17}\",\n    \"{12,15-17}\": true\n  }), \"export const GlobalStyle = createGlobalStyle`\\n  ${reset}\\n\\n  *, *:before, *:after {\\n    box-sizing: border-box;\\n  }\\n  html {\\n    box-sizing: border-box;\\n    scroll-behavior: smooth;\\n    font-family: ${({ theme }) => theme.font.sans};\\n    font-size: ${({ theme }) => theme.fontSize.lg};\\n    color: ${({ theme }) => theme.colours.grey[900]};\\n  }\\n  body {\\n    line-height: ${({ theme }) => theme.lineHeight.relaxed};\\n    letter-spacing: ${({ theme }) => theme.letterSpacing.wide};\\n    background-color: ${({ theme }) => theme.colours.white};\\n  }\\n`\\n\")), mdx(\"h2\", {\n    \"id\": \"shared-page-elements\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#shared-page-elements\",\n    \"aria-label\": \"shared page elements permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Shared Page Elements\"), mdx(\"p\", null, \"The current page is still missing basic styles for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h1\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"p\"), \" so I\\u2019m\\ngoing to create those in a new directory\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/page-elements\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"mkdir src/components/page-elements\\ntouch src/components/page-elements/h1.js\\ntouch src/components/page-elements/p.js\\n\")), mdx(\"p\", null, \"And add some base styles to those for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h1\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import styled from 'styled-components'\\n\\nexport const H1 = styled.h1`\\n  font-size: ${({ theme }) => theme.fontSize['4xl']};\\n  font-family: ${({ theme }) => theme.font.serif};\\n  margin-top: ${({ theme }) => theme.spacing[8]};\\n  line-height: ${({ theme }) => theme.lineHeight.none};\\n`\\n\")), mdx(\"p\", null, \"And the same sort of thing for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"p\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import styled from 'styled-components'\\n\\nexport const P = styled.p`\\n  font-size: ${({ theme }) => theme.fontSize.base};\\n  margin-top: ${({ theme }) => theme.spacing[3]};\\n  strong {\\n    font-weight: bold;\\n  }\\n  em {\\n    font-style: italic;\\n  }\\n`\\n\")), mdx(\"p\", null, \"Then it\\u2019s a case of replacing the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h1\"), \"\\u2019s and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"p\"), \"\\u2019s in the project to\\nuse the styled components.\"), mdx(\"p\", null, \"Here\\u2019s the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" file as an example:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"{4-5,11-13}\",\n    \"{4-5,11-13}\": true\n  }), \"import { Link } from 'gatsby'\\nimport React from 'react'\\nimport Image from '../components/image'\\nimport { H1 } from '../components/page-elements/h1'\\nimport { P } from '../components/page-elements/p'\\nimport SEO from '../components/seo'\\n\\nconst IndexPage = () => (\\n  <>\\n    <SEO title=\\\"Home\\\" />\\n    <H1>Hi people</H1>\\n    <P>Welcome to your new Gatsby site.</P>\\n    <P>Now go build something great.</P>\\n    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>\\n      <Image />\\n    </div>\\n    <Link to=\\\"/page-2/\\\">Go to page 2</Link>\\n  </>\\n)\\n\\nexport default IndexPage\\n\")), mdx(\"h2\", {\n    \"id\": \"export-all-your-styled-components-from-an-index-file\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#export-all-your-styled-components-from-an-index-file\",\n    \"aria-label\": \"export all your styled components from an index file permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Export all your styled-components from an index file\"), mdx(\"p\", null, \"As the amount of page elements grows you may want to consider using an\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" file instead of having an import for each individual\\ncomponent you can import from one file.\"), mdx(\"p\", null, \"Let\\u2019s take a quick look at that, so let\\u2019s say I import the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h1\"), \" and\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"p\"), \" into a file, it\\u2019ll looks something like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import { H1 } from '../components/page-elements/h1'\\nimport { P } from '../components/page-elements/p'\\n\")), mdx(\"p\", null, \"If you have several elements your using in the file the imports could\\nget a bit cluttered.\"), mdx(\"p\", null, \"I\\u2019ve taken to creating an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" file that will export all the\\ncomponents, like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"export * from './h1'\\nexport * from './p'\\n\")), mdx(\"p\", null, \"Then when importing the components it will look like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import { H1, P } from '../components/page-elements'\\n\")), mdx(\"p\", null, \"That\\u2019s it for this one!\"), mdx(\"h2\", {\n    \"id\": \"heres-a-video-detailing-the-process-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#heres-a-video-detailing-the-process-\",\n    \"aria-label\": \"heres a video detailing the process  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Here\\u2019s a video detailing the process \\uD83D\\uDCFA\"), mdx(YouTube, {\n    youTubeId: \"8jlh_FyuM8c\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"thanks-for-reading-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#thanks-for-reading-\",\n    \"aria-label\": \"thanks for reading  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Thanks for reading \\uD83D\\uDE4F\"), mdx(\"p\", null, \"Please take a look at my other content if you enjoyed this.\"), mdx(\"p\", null, \"Follow me on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/spences10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Twitter\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/ama\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ask Me Anything\"), \" on GitHub.\"), mdx(\"h2\", {\n    \"id\": \"resources\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#resources\",\n    \"aria-label\": \"resources permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.youtube.com/watch?v=Dd-Y9K7IKmk&feature=emb_title\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Design Systems Design System - Siddharth Kshetrapal\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/tailwindcss/designing-with-tailwindcss/blob/master/01-getting-up-and-running/07-customizing-your-design-system/tailwind-full.config.js\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Tailwind full config\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://egghead.io/playlists/introduction-to-tailwind-and-the-utility-first-workflow-0b697b10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Introduction to Tailwind and the Utility first workflow\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://egghead.io/playlists/design-and-implement-common-tailwind-components-8fbb9b19\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Design and Implement Common Tailwind Components\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://egghead.io/playlists/build-a-responsive-navbar-with-tailwind-4d328a35\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Build a Responsive Navbar with Tailwind\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://egghead.io/playlists/build-and-style-a-dropdown-in-tailwind-7f34fead\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Build and Style a Dropdown in Tailwind\"))));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"I'm going to go over globally styling the Gatsby Default Starter with\nstyled-components v5, I've done this in the  past with\nstyled…","tableOfContents":{"items":[{"url":"#install-styled-components-dependencies","title":"Install styled-components dependencies"},{"url":"#configure-gatsby-plugin-styled-components-and-createglobalstyle","title":"Configure gatsby-plugin-styled-components and createGlobalStyle"},{"url":"#remove-current-styling","title":"Remove current styling"},{"url":"#confirm-css-reset","title":"Confirm CSS reset"},{"url":"#create-the-new-browser-base-styles","title":"Create the new browser base styles"},{"url":"#place-globalstyle-at-the-top-of-the-react-tree-","title":"Place GlobalStyle at the top of the React tree 🌳"},{"url":"#make-a-root-wrapper-to-keep-things-dry-","title":"Make a Root Wrapper to keep things DRY 🌵"},{"url":"#global-fonts-with-gatsby-plugin-google-fonts","title":"Global fonts with gatsby-plugin-google-fonts"},{"url":"#styled-components-theme-provider","title":"styled-components Theme provider"},{"url":"#shared-page-elements","title":"Shared Page Elements"},{"url":"#export-all-your-styled-components-from-an-index-file","title":"Export all your styled-components from an index file"},{"url":"#heres-a-video-detailing-the-process-","title":"Here's a video detailing the process 📺"},{"url":"#thanks-for-reading-","title":"Thanks for reading 🙏"},{"url":"#resources","title":"Resources"}]},"timeToRead":4,"fields":{"slug":"/2020/02/06/globally-style-gatsby-styled-components/","editLink":"https://github.com/spences10/thelocalhost/edit/authoring/posts/2020/02/06/globally-style-gatsby-styled-components/index.mdx"}}},"pageContext":{"slug":"/2020/02/06/globally-style-gatsby-styled-components/","previous":{"id":"5a99c22e-cc2a-57f5-98a0-6a23ccd9dc33","excerpt":"In this guide I'm going to detail upgrading a Windows Subsystem Linux\n(WSL) Ubuntu install from the current version 18.04 to 19.10 this is\nan intermediary release before Ubuntu 20.04 is released on 2020\nApril 23. I have documented  this process in…","frontmatter":{"title":"Upgrade Windows Subsystem Linux - Ubuntu 18.04 to Ubuntu 19.10","date":"2020-01-28T00:00:00.000Z"},"fields":{"slug":"/2020/01/28/update-wsl-ubuntu-from-18.10-to-19.10/"}},"next":{"id":"2ab5d84d-9577-5339-883d-11274abaa698","excerpt":"The main purpose for me documenting this is to demonstrate\nimplementing a table of contents with smooth scroll to the anchors in\na Gatsby project using MDX. In the process I'm also setting up the Gatsby starter with MDX. TL;DR, go here:   Make a TOC…","frontmatter":{"title":"Add a Table of Contents with Smooth scroll using Gatsby and MDX","date":"2020-02-13T00:00:00.000Z"},"fields":{"slug":"/2020/02/13/smooth-scroll-toc-gatsby/"}}}}}