use styled-jsx in PitView

src/components/board/PitView.tsx

@@ -4,7 +4,6 @@ import Util from "../../util/Util";
 import PitViewModel from "../../viewmodel/PitViewModel";
 import StoneView from "./StoneView";
 
-
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
     onClick: () => void;
@@ -14,23 +13,22 @@ const PitView: FunctionComponent<{
     ));
 
     return (
-        <div
-            onClick={onClick}
-            style={{
-                background: pitViewModel.pitColor,
-                margin: "5px",
-                padding: "5px",
-                borderRadius: "10vw",
-                transition: "background-color 0.5s",
-                display: "flex",
-                alignItems: "center",
-                alignContent: "center",
-                justifyContent: "center",
-                justifyItems: "center",
-                flexWrap: "wrap",
-            }}
-        >
+        <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
             {stones}
+            <style jsx>{`
+                .pit {
+                    margin: 5px;
+                    padding: 5px;
+                    border-radius: 10vw;
+                    transition: background-color 0.5s;
+                    display: flex;
+                    align-items: center;
+                    align-content: center;
+                    justify-content: center;
+                    justify-items: center;
+                    flex-wrap: wrap;
+                }
+            `}</style>
         </div>
     );
 };