CartContainerのレイアウト作成

s-yoshiii · Sep 14, 2022 · 5f2f6a4 · 5f2f6a4
1 parent 809c8b6
commit 5f2f6a4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
@@ -6,6 +6,7 @@ import {
   Divider,
   Button,
 } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import React from "react";
 import { useAppSelector } from "../store";
 import { CartItem } from "./CartItem";
@@ -37,10 +38,14 @@ const CartContainer = () => {
             return <CartItem key={item.id} />;
           })}
         </Stack>
-        <Divider sx={{ mt: 7 }} variant="middle" />
-        <Box>合計:{total}円</Box>
-        <Box>
-          <Button variant="contained">全削除</Button>
+        <Divider sx={{ my: 7 }} />
+        <Box sx={{ textAlign: "right" }}>
+          <Typography variant="h3">合計:{total}円</Typography>
+        </Box>
+        <Box sx={{ textAlign: "center" }}>
+          <Button variant="outlined" size="large" startIcon={<DeleteIcon />}>
+            全削除
+          </Button>
         </Box>
       </Box>
     </Container>

diff --git a/src/components/CartItem.tsx b/src/components/CartItem.tsx
@@ -17,7 +17,13 @@ export const CartItem = () => {
         image="https://placehold.jp/600x400.png"
         alt=""
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "calc(100% - 200px)",
+        }}
+      >
         <CardContent sx={{ p: 3 }}>
           <Typography
             component="div"