{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2018/11/29/gatsby-starter-to-styled-components/","result":{"data":{"mdx":{"id":"a2915b9a-97a3-58a4-b11e-dc22b1cc860d","frontmatter":{"title":"Convert the Gatsby default starter to styled-components","date":"2018 November 29th","cover":{"id":"41def76b-9e25-52d2-92c7-0a8682d1c720","publicURL":"/static/cover-d194fd8f30c1fa1224686f2611226199.jpg"}},"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\": \"2018-11-29T00:00:00.000Z\",\n  \"title\": \"Convert the Gatsby default starter to styled-components\",\n  \"tags\": [\"information\", \"learning\", \"guide\", \"gatsby\", \"getting started\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by CHU TAI on Unsplash\"\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, \"Let\\u2019s go through getting styled-components working with the Gatsby\\ndefault starter.\"), mdx(YouTube, {\n    youTubeId: \"O5sWySCr668\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"In this example we\\u2019re going to use the Gatsby default starter you get\\nwith \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"CodeSandbox\"), \" and add in styled-components, so first up, open a\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"new CodeSandbox\"), \" and select Gatsby from the SERVER TEMPLATES.\"), mdx(\"h2\", {\n    \"id\": \"1-dependencies\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#1-dependencies\",\n    \"aria-label\": \"1 dependencies permalink\",\n    \"className\": \"anchor-toc 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  })))), \"1. Dependencies\"), mdx(\"p\", null, \"In the dependencies section of the CodeSandbox editor you\\u2019ll need to\\nadd the following:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"gatsby-plugin-styled-components\\nstyled-components\\nbabel-plugin-styled-components\\n\")), mdx(\"h2\", {\n    \"id\": \"2-config\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#2-config\",\n    \"aria-label\": \"2 config permalink\",\n    \"className\": \"anchor-toc 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  })))), \"2. Config\"), mdx(\"p\", null, \"Now we need to change \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" to incorporate the new\\ndependencies we\\u2019ve just added. It doesn\\u2019t have any configuration\\noptions so it can just go in as an extra line on the config, in this\\ncase I\\u2019m adding it after the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-sharp\"), \" plugin:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"'gatsby-transformer-sharp',\\n'gatsby-plugin-sharp',\\n'gatsby-plugin-styled-components',\\n\")), mdx(\"p\", null, \"Don\\u2019t forget the comma at the end \\uD83D\\uDC4D\"), mdx(\"h2\", {\n    \"id\": \"3-global-style\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#3-global-style\",\n    \"aria-label\": \"3 global style permalink\",\n    \"className\": \"anchor-toc 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  })))), \"3. Global Style\"), mdx(\"p\", null, \"Now that we\\u2019re ready to rock n\\u2019 roll with styled-components we need to\\nremove the currently applied styled in the default starter and apply\\nour own.\"), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/layout.js\"), \" component there\\u2019s an import for\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.css\"), \" this is the CSS reset for the starter if we remove the\\nimport from here we\\u2019ll see the styles for border and font be reset. We\\ncan now delete the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.css\"), \" file and create out own CSS reset\\nusing the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createGlobalStyle\"), \" function from styled-components.\"), mdx(\"p\", null, \"Create a new folder \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \", in this example it\\u2019s in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/theme\"), \" and\\nadd a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"globalStyle.js\"), \" file in there.\"), mdx(\"p\", null, \"This will export a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"GlobalStyle\"), \" component for us to use throughout\\nthe app.\"), mdx(\"p\", null, \"Let\\u2019s add in a Google font and reset the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"padding\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"margin\"), \", for\\nvisual feedback we\\u2019re going to add the font directly to the body\\nelement.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import { createGlobalStyle } from 'styled-components';\\n\\nexport const GlobalStyle = createGlobalStyle`\\n  @import url('https://fonts.googleapis.com/css?family=Kodchasan:400,700');\\n  body {\\n    padding: 0;\\n    margin: 0;\\n    font-family: Kodchasan;\\n  }\\n  a {\\n    text-decoration: none;\\n  }\\n  ul {\\n    margin: 0 auto;\\n    list-style-type: none;\\n  }\\n`;\\n\")), mdx(\"p\", null, \"Ok, now we can use the export component here to apply styles globally\\nin the app. So we need to have this as high up the component tree as\\npossible, in this case that is in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.js\"), \" component as it\\nwraps all the pages in this project.\"), mdx(\"p\", null, \"In \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.js\"), \" import the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"GlobalStyle\"), \" component.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import Header from './header';\\nimport { GlobalStyle } from '../theme/globalStyle';\\n\")), mdx(\"p\", null, \"Then add it in with the other components being rendered.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"render={data => (\\n  <>\\n    <GlobalStyle />\\n    <Helmet\\n    ...\\n\")), mdx(\"p\", null, \"Ok! Global styled applied, we should now see the font change and the\\nmargin around the body of the page change.\"), mdx(\"p\", null, \"Time to use styled-components!\"), mdx(\"h2\", {\n    \"id\": \"4-use-styled-components\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#4-use-styled-components\",\n    \"aria-label\": \"4 use styled components permalink\",\n    \"className\": \"anchor-toc 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  })))), \"4. Use styled-components\"), mdx(\"p\", null, \"Now let\\u2019s convert all the inline styles used in the starter to\\nstyled-components.\"), mdx(\"p\", null, \"This is the actual styling part, which is moving the existing styles\\nto styled components, working from top to bottom of the file\\nstructure, changing:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"src/components/header.js\\nsrc/components/layout.js\\nsrc/pages/index.js\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"header.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React from 'react';\\nimport { Link } from 'gatsby';\\nimport styled from 'styled-components';\\n\\nconst HeaderWrapper = styled.div`\\n  background: rebeccapurple;\\n  margin-bottom: 1.45rem;\\n`;\\n\\nconst Headline = styled.div`\\n  margin: 0 auto;\\n  max-width: 960;\\n  padding: 1.45rem 1.0875rem;\\n  h1 {\\n    margin: 0;\\n  }\\n`;\\n\\nconst StyledLink = styled(Link)`\\n  color: white;\\n  textdecoration: none;\\n`;\\n\\nconst Header = ({ siteTitle }) => (\\n  <HeaderWrapper>\\n    <Headline>\\n      <h1>\\n        <StyledLink to=\\\"/\\\">{siteTitle}</StyledLink>\\n      </h1>\\n    </Headline>\\n  </HeaderWrapper>\\n);\\n\\nexport default Header;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"layout.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React from 'react';\\nimport PropTypes from 'prop-types';\\nimport Helmet from 'react-helmet';\\nimport { StaticQuery, graphql } from 'gatsby';\\n\\nimport styled from 'styled-components';\\n\\nimport Header from './header';\\nimport { GlobalStyle } from '../theme/globalStyle';\\n\\nconst ContentWrapper = styled.div`\\n  margin: 0 auto;\\n  maxwidth: 960;\\n  padding: 0px 1.0875rem 1.45rem;\\n  paddingtop: 0;\\n`;\\n\\nconst Layout = ({ children }) => (\\n  <StaticQuery\\n    query={graphql`\\n      query SiteTitleQuery {\\n        site {\\n          siteMetadata {\\n            title\\n          }\\n        }\\n      }\\n    `}\\n    render={data => (\\n      <>\\n        <GlobalStyle />\\n        <Helmet\\n          title={data.site.siteMetadata.title}\\n          meta={[\\n            { name: 'description', content: 'Sample' },\\n            { name: 'keywords', content: 'sample, something' },\\n          ]}\\n        >\\n          <html lang=\\\"en\\\" />\\n        </Helmet>\\n        <Header siteTitle={data.site.siteMetadata.title} />\\n        <ContentWrapper>{children}</ContentWrapper>\\n      </>\\n    )}\\n  />\\n);\\n\\nLayout.propTypes = {\\n  children: PropTypes.node.isRequired,\\n};\\n\\nexport default Layout;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"index.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React from 'react';\\nimport { Link } from 'gatsby';\\nimport styled from 'styled-components';\\n\\nimport Layout from '../components/layout';\\nimport Image from '../components/image';\\n\\nconst ImgWrapper = styled.div`\\n  max-width: 300px;\\n  margin-bottom: 1.45rem;\\n`;\\n\\nconst IndexPage = () => (\\n  <Layout>\\n    <h1>Hi people</h1>\\n    <p>Welcome to your new Gatsby site.</p>\\n    <p>Now go build something great.</p>\\n    <ImgWrapper>\\n      <Image />\\n    </ImgWrapper>\\n    <Link to=\\\"/page-2/\\\">Go to page 2</Link>\\n  </Layout>\\n);\\n\\nexport default IndexPage;\\n\")), mdx(\"h2\", {\n    \"id\": \"5-done\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#5-done\",\n    \"aria-label\": \"5 done permalink\",\n    \"className\": \"anchor-toc 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  })))), \"5. Done\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Thanks for reading\")), mdx(\"p\", null, \"Here\\u2019s the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/yp3z16yw11\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"example code\"), \" we worked on if you need reference. \\uD83D\\uDC40\\uD83D\\uDC4C\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Let's go through getting styled-components working with the Gatsby\ndefault starter. In this example we're going to use the Gatsby default…","tableOfContents":{"items":[{"url":"#1-dependencies","title":"1. Dependencies"},{"url":"#2-config","title":"2. Config"},{"url":"#3-global-style","title":"3. Global Style"},{"url":"#4-use-styled-components","title":"4. Use styled-components"},{"url":"#5-done","title":"5. Done"}]},"timeToRead":1,"fields":{"slug":"/2018/11/29/gatsby-starter-to-styled-components/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2018/11/29/gatsby-starter-to-styled-components/index.mdx"}}},"pageContext":{"slug":"/2018/11/29/gatsby-starter-to-styled-components/","previous":{"id":"02084239-2953-5445-b005-6722c79738b4","excerpt":"Let's set up Gatsby to pull data from GraphCMS. This will be a walk-through of setting up some basic data on the\nheadless CMS, GraphCMS and then querying that data in Gatsby. 1. Set up GraphCMS Set yourself up with a GraphCMS account at\n https://app…","frontmatter":{"title":"Get your GraphCMS data into Gatsby","date":"2018-11-25T00:00:00.000Z"},"fields":{"slug":"/2018/11/25/graphcms-to-gatsby/"}},"next":{"id":"56f083fe-ad5b-51bc-b02f-146b3cc298df","excerpt":"Cliffs/TL;DR I made a  recruiter FAQ  on my personal site for recruiters and\ncreated an  online CV . Preamble Apologies up front about this post if it comes across as entitled or\nranty and I'm sure a lot of people will disagree with my approach. I'm…","frontmatter":{"title":"Turning a job hunt into a dev project","date":"2018-11-30T00:00:00.000Z"},"fields":{"slug":"/2018/11/30/job-hunt-dev-project/"}}}}}