feat | add MUI

Author: qitpydev

package.json

@@ -4,6 +4,11 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@fontsource/roboto": "^4.5.8",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.4",
     "@reduxjs/toolkit": "^1.8.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",

src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import './App.css';
-import ScreenWrapper from './pages/Portfolio/features/ScreenWrapper/ScreenWrapper';
 import RouterManagement from './routes/router';
 
 /**

src/index.tsx

@@ -5,6 +5,11 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom'
 import { store } from './pages/Portfolio/common/store/store';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+
 
 const container = document.getElementById('root')!;
 const root = createRoot(container);
@@ -19,7 +24,4 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals(console.log);

src/pages/Todo/Todo.scss

@@ -0,0 +1,9 @@
+#todo {
+    background-color: white;
+    width: 100vw;
+    height: 100vh;
+
+    #todo > * {
+        background-color: white;
+    }
+}

src/pages/Todo/Todo.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import "./Todo.scss"
 
 function Todo() {
   return (
-    <div>Todo</div>
+    <div id="todo">Todo</div>
   )
 }