學習筆記-Material UI 5 (MUI) React Tutorial | MUI Responsive Real Project

跟著教學影片熟悉CRA、MUI使用方式

參考影片：Material UI 5 (MUI) React Tutorial | MUI Responsive Real Project

環境建立

安裝

• cra
• mui

整理資料夾

public只留下index.html

src只留下App.js、index.js

好用套件
開新檔案輸入RAFCE就完成箭頭函式元件

ES7+ React/Redux/React-Native snippets

相關介紹

VSCode快捷件參考

原先遇到prettier 無法排版jsx，跟著下面教學安裝就解決了

Day 9 | 如何在 React 專案設置 ESLint 和 Prettier

遇到調色盤問題，light模式的顏色不是我的指定顏色，是預設的顏色。

這個影片教學有介紹客製化調色盤的使用，但在使用darkmode的時候，是用預設的調色盤不是自己設定的。

遇到props傳遞問題

ERROR in [eslint] 
src/components/Sidebar.jsx
  Line 20:20:  'mode' is missing in props validation     react/prop-types
  Line 20:26:  'setMode' is missing in props validation  react/prop-types

在.eslintrc.json的rules加上底下的規範就解決了

"rules": {
  "react/prop-types": "off"
 }

遇到沒有使用的元件就會報錯

ERROR in [eslint]
src/styles/theme/index.js
  Line 2:10:  'darken' is defined but never used  no-unused-vars

在.eslintrc.json的rules加上底下的規範就解決了

"rules": { "no-unused-vars": "off" }