From 0b308e570e481250e425480e44e43d949d5c4103 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 22:38:33 +0300
Subject: [PATCH] use styled-jsx in PageContainer

---
 src/components/PageContainer.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
index 4bdac52..82233f4 100644
--- a/src/components/PageContainer.tsx
+++ b/src/components/PageContainer.tsx
@@ -2,16 +2,20 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 import { Theme } from "../theme/Theme";
 
-const PageContainer: FunctionComponent<{theme: Theme}> = (props) => {
+const PageContainer: FunctionComponent<{ theme: Theme }> = (props) => {
     return (
         <div style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
             background: props.theme?.background,
-            flex: "1",
-            minHeight: "400px"
         }}>
+            <style jsx>{`
+                div {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    flex: 1;
+                    min-height: 400px;
+                }
+            `}</style>
             {props.children}
         </div>
     );