👍 マテリアルUIを導入した

yuki-snow1823 · May 7, 2023 · 2250a44 · 2250a44
1 parent 4726f15
commit 2250a44
Show file tree

Hide file tree

Showing 4 changed files with 312 additions and 5 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.5",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.12.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import './App.css'
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
 import { Sample } from './Sample'
+import { Test } from './Test'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 const client = new ApolloClient({
@@ -14,6 +15,7 @@ function App() {
       <ApolloProvider client={client}>
         <Routes>
           <Route path="/sample" element={<Sample />} />
+          <Route path="/test" element={<Test />} />
         </Routes>
       </ApolloProvider>
     </BrowserRouter>

diff --git a/frontend/src/Test.tsx b/frontend/src/Test.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import Button from '@mui/material/Button'
+
+export const Test = () => {
+    return (
+        <div>
+            <Button variant="contained">Hello World</Button>
+        </div>
+    )
+}