remove emotion for styled components

gatsby-config.js

@@ -78,7 +78,6 @@ module.exports = {
       },
     },
     'gatsby-plugin-styled-components',
-    `gatsby-plugin-emotion`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {

package.json

@@ -8,11 +8,8 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "babel-plugin-styled-components": "^2.1.4",
     "gatsby": "^5.12.1",
-    "gatsby-plugin-emotion": "^8.12.0",
     "gatsby-plugin-image": "^3.12.0",
     "gatsby-plugin-manifest": "^5.12.0",
     "gatsby-plugin-react-helmet": "^6.12.0",

src/components/layout.js

@@ -1,7 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
 import styled from 'styled-components';
-import { css } from '@emotion/react'
 import { Helmet } from 'react-helmet'
 
 import { rhythm } from "../utils/typography"
@@ -30,20 +29,34 @@ a {
 }
 `;
 
+const LayoutHeaderContainer = styled.header`
+  position: relative;
+  margin-top: -42px;
+  
+  @media print {
+    display: none;
+  }
+`;
+
+const LayoutContainer = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${rhythm(30)};
+  padding: ${rhythm(1.5)} ${rhythm(3 / 4)};
+
+  @page {
+    margin: 0 0;
+  }
+  @media print {
+    max-width: max-content;
+    padding: 8mm 10mm !important;
+    margin: 0 !important;
+  }
+`;
+
 function LayoutHeader() {
   return (
-    <header
-        style={{
-          position: "relative",
-          marginTop: "-42px",
-        }}
-        css={css`
-          @media print {
-             display: none;
-          }
-          `
-        }
-      >
+    <LayoutHeaderContainer>
       <h1
           className="title"
           style={{
@@ -121,31 +134,13 @@ function LayoutHeader() {
           </NavigationItem>
         </ul>
       </nav>
-    </header>
+    </LayoutHeaderContainer>
   )
 }
 
 function Layout ({ location, title, children }) {
   return (
-    <div
-      style={{
-        marginLeft: `auto`,
-        marginRight: `auto`,
-        maxWidth: rhythm(30),
-        padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
-      }}
-      css={css`
-          @page {
-            margin: 0 0;
-          }
-          @media print {
-            max-width: auto;
-            padding: 8mm 10mm !important;
-            margin: 0 !important;
-          }
-          `
-      }
-    >
+    <LayoutContainer>
       <Helmet defer={false}>
         <meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
       </Helmet>
@@ -154,7 +149,7 @@ function Layout ({ location, title, children }) {
           title={title}
         />
       <main>{children}</main>
-    </div>
+    </LayoutContainer>
   );
 }