{"id":1485,"date":"2020-11-19T03:44:11","date_gmt":"2020-11-19T03:44:11","guid":{"rendered":"http:\/\/10.0.0.14\/?p=1485"},"modified":"2021-09-08T00:42:43","modified_gmt":"2021-09-08T00:42:43","slug":"tdd-with-gatsby-django-docker-part-2-chapter-12-using-theme-ui","status":"publish","type":"post","link":"https:\/\/tutorials.leesonresearch.com\/tutorials\/2020\/11\/19\/tdd-with-gatsby-django-docker-part-2-chapter-12-using-theme-ui\/","title":{"rendered":"TDD with Gatsby, Django & Docker Part 2, Chapter 12 — Styled Components"},"content":{"rendered":"\n

Styled Components<\/h1>\n\n\n\n

Quoting from the Styled Components Docs<\/a>:<\/p>\n\n\n\n

styled-components is the result of wondering how we could enhance CSS for styling React component systems.<\/strong> By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users<\/p><\/a>Styled Components<\/a> Docs<\/cite><\/blockquote>\n\n\n\n

We begin…<\/p>\n\n\n

\n# Spin the docker project down\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml down\n\n# or\nmake dev-down\n\n# Install npm dependencies\ncd frontend\nnpm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components\n<\/pre><\/div>\n\n\n
Add the following to the gatsby-config.js file:<\/p>\n\n\n
\n\/\/ frontend\/gatsby-config.js\n\n\/**\n * Configure your Gatsby site with this file.\n *\n * See: https:\/\/www.gatsbyjs.com\/docs\/gatsby-config\/\n *\/\n\nmodule.exports = {\n  siteMetadata: {\n    title: `Gatsby Todo App`,\n    description: `A fabulous description of our Todo app here...`,\n    author: `Ron Leeson`,\n  },\n  plugins: [\n    {\n      resolve: `gatsby-plugin-typography`,\n      options: {\n        pathToConfigModule: `src\/utils\/typography`,\n      },\n    },\n    `gatsby-plugin-styled-components`,\n  ],\n}\n<\/pre><\/div>\n\n\n
Rebuild frontend:<\/p>\n\n\n
\n# cd to root of project\ndocker-compose build frontend\n\n# reboot app\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n\n# or\nmake dev\n<\/pre><\/div>\n\n\n
The whole point of styled-components is to isolate a single css class from other components eliminating the problem of selector name collisions but it would useful to be able to define styles that can be applied globally. For that we use createGlobalStyle<\/strong><\/code>.<\/p>\n\n\n\n
\n
Setup Global Styles<\/h2>\n\n\n\n
We are going to us createGlobalStyle<\/code><\/strong> in our layout.js component which will allows us to share our styles globally throughout the site.<\/p>\n\n\n\n
Start by editing our layout.js file:<\/p>\n<\/div><\/div>\n\n\n
\n\/\/ frontend\/src\/components\/layout.js\n\nimport React from "react"\nimport Header from ".\/header"\nimport styled from "styled-components"\nimport { createGlobalStyle } from "styled-components"\n\nconst GlobalStyle = createGlobalStyle`\n  div {\n    font-size: 1.8rem;\n  }\n  a {\n    color: teal;\n  }\n`\nconst BodyWrapper = styled.div`\n  padding: 2.0rem;\n`\n\nexport default function Layout({ children }) {\n  return (\n    <React.Fragment>\n      <GlobalStyle \/>\n        <Header \/>\n        <BodyWrapper>{children}<\/BodyWrapper>\n    <\/React.Fragment>\n  )\n}\n\n<\/pre><\/div>\n\n\n
What did we do?<\/p>\n\n\n\n