Add styled-components to the project

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}

components/Header.jsx

@@ -1,29 +1,34 @@
 import React from 'react';
 import Link from 'next/link';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
-export default function Header(props) {
+function Header({ isMobile }) {
   return (
-    <div className="header">
+    <Header.Container>
       <Link href="/">
-        <img className="logo" src="/CCCLogo.png" alt="Clap City Cinema Logo" />
+        <Header.Logo src="/CCCLogo.png" isMobile={isMobile} alt="Clap City Cinema Logo" />
       </Link>
-      <style jsx>
-        {`
-          .header {
-            display: flex;
-            padding-left: 25px;
-            padding-top: 25px;
-            height: 80px;
-            align-items: center;
-          }
-
-          .logo {
-            position: relative;
-            height: ${props.isMobile ? 'auto' : '100%'};
-            cursor: pointer;
-          }
-        `}
-      </style>
-    </div>
+    </Header.Container>
   );
 }
+
+Header.propTypes = {
+  isMobile: PropTypes.bool.isRequired,
+};
+
+Header.Container = styled.div`
+  display: flex;
+  padding-left: 25px;
+  padding-top: 25px;
+  height: 80px;
+  align-items: center;
+`;
+
+Header.Logo = styled.img`
+  position: relative;
+  height: ${(p) => (p.isMobile ? 'auto' : '100%')};
+  cursor: pointer;
+`;
+
+export default Header;

package.json

@@ -46,6 +46,7 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "socket.io": "^2.3.0",
-    "socket.io-client": "^2.3.0"
+    "socket.io-client": "^2.3.0",
+    "styled-components": "^5.1.0"
   }
 }

pages/_document.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Document from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}