use styled-jsx in StoreView

src/components/board/StoreView.tsx

@@ -22,33 +22,35 @@ const StoreView: FunctionComponent<{
   );
   return (
     <div
+      className="store"
       style={{
-          gridColumn: gridColumn,
-          gridRow: gridRow,
         background: pitViewModel.pitColor,
-          margin: "5px",
+        gridColumn: gridColumn,
-          borderRadius: "10vw",
+        gridRow: gridRow
-          display: "flex",
+      }}>
-          alignItems: "center",
-          justifyContent: "center",
-          alignContent: "center",
-          flexWrap: "wrap",
-          position: "relative",
-        }}
-      >
       {stones}
-        <span
+      <span className="store-stone-count-text" style={{ color: textColor }}>
-          style={{
-            position: "absolute",
-            bottom: "2vw",
-            fontFamily: "monospace",
-            fontWeight: "bold",
-            fontSize: "2vw",
-            color: textColor,
-          }}
-        >
         {stones.length}
       </span>
+      <style jsx>{`
+          .store {
+            margin: 5px;
+            border-radius: 10vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            align-content: center;
+            flex-wrap: wrap;
+            position: relative;
+          }
+          .store-stone-count-text {
+            position: absolute;
+            bottom: 2vw;
+            font-family: monospace;
+            font-weight: bold;
+            font-size: 2vw;
+          }
+        `}</style>
     </div>
   );
 };