use styled-jsx in BoardView

src/components/board/BoardView.tsx

@@ -39,18 +39,7 @@ const BoardView: FunctionComponent<{
     boardViewModel.pits[game.board.player2BankIndex()];
   const isPlayer2 = userKey === game?.player2Id;
   return (
-    <div
+    <div className="board" style={{ background: theme.boardColor }}>
-      style={{
-        margin: "1vw",
-        padding: "2vw",
-        display: "grid",
-        gridTemplateColumns: "repeat(8, 11vw)",
-        gridTemplateRows: "repeat(2, 11vw)",
-        borderRadius: "3vw",
-        transition: "background-color 0.5s",
-        background: theme.boardColor,
-      }}
-    >
       <StoreView
         context={context}
         pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
@@ -65,6 +54,17 @@ const BoardView: FunctionComponent<{
       />
       {isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
       {isPlayer2 ? player2Pits : player1Pits}
+      <style jsx>{`
+        .board {
+          margin: 1vw;
+          padding: 2vw;
+          display: grid;
+          grid-template-columns: repeat(8, 11vw);
+          grid-template-rows: repeat(2, 11vw);
+          border-radius: 3vw;
+          transition: background-color 0.5s;
+        }
+      `}</style>
     </div>
   );
 };