添加material-ui简单使用

package.json

@@ -13,6 +13,10 @@
   "author": "zhouxhere",
   "license": "ISC",
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.3.0",
+    "@mui/material": "^5.3.0",
     "axios": "^0.24.0",
     "core-js": "^3.20.2",
     "moment": "^2.29.1",
@@ -45,8 +49,6 @@
     "eslint-webpack-plugin": "^3.1.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
-    "less": "^4.1.2",
-    "less-loader": "^10.2.0",
     "lint-staged": "^12.1.7",
     "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "^5.0.2",

src/App.js

@@ -1,8 +1,21 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Router from './router'
+import { useSelector } from 'react-redux'
+import { createTheme, ThemeProvider } from '@mui/material'
 
 const App = () => {
-  return <Router />
+  const themeConfig = useSelector((state) => state.theme)
+  const theme = createTheme(themeConfig)
+
+  useEffect(() => {
+    console.log('app load')
+  }, [])
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Router />
+    </ThemeProvider>
+  )
 }
 
 export default App

src/config/defaultTheme.js

@@ -0,0 +1 @@
+module.exports = {}

src/page/home/index.js

@@ -1,3 +1,5 @@
+import { Button } from '@mui/material'
+import { orange } from '@mui/material/colors'
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -12,13 +14,39 @@ const Home = () => {
     dispatch({ type: 'DEL_COUNT' })
   }, [dispatch])
 
+  const changeTheme = useCallback(() => {
+    dispatch({
+      type: 'THEME_UPDATE',
+      palette: {
+        primary: {
+          main: orange[500],
+        },
+      },
+    })
+  }, [dispatch])
+
+  const resetTheme = useCallback(() => {
+    dispatch({
+      type: 'THEME_RESET',
+    })
+  }, [dispatch])
+
   return (
     <div>
       <h3>home page</h3>
-      <button onClick={addCount}>add</button>
+      <Button variant='outlined' onClick={addCount}>
-      <button onClick={delCount}>del</button>
+        add
+      </Button>
+      <Button variant='outlined' onClick={delCount}>
+        del
+      </Button>
+      <Button variant='outlined' onClick={changeTheme}>
+        change
+      </Button>
+      <Button variant='outlined' onClick={resetTheme}>
+        reset
+      </Button>
     </div>
   )
 }
-
 export default Home

src/store/index.js

@@ -4,9 +4,11 @@ import storageEnhancer from './enhancer/storage'
 import loggerMiddleware from './middleware/logger'
 import appReducer from './reducer/app'
 import countReducer from './reducer/count'
+import themeReducer from './reducer/theme'
 
 const reducer = combineReducers({
   app: appReducer,
+  theme: themeReducer,
   count: countReducer,
 })
 const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunk)

src/store/reducer/theme.js

@@ -0,0 +1,23 @@
+import * as defaultTheme from '../../config/defaultTheme'
+import { copyTool } from '../../util/copy'
+import { storeTool } from '../../util/store'
+
+const updateTheme = (state, params) => {
+  return copyTool.merger(state, params)()
+}
+
+const resetTheme = () => {
+  return defaultTheme
+}
+
+const saveTheme = (themeState) => {
+  return themeState
+}
+
+const themeReducer = storeTool.createReducer(defaultTheme, {
+  THEME_UPDATE: updateTheme,
+  THEME_RESET: resetTheme,
+  THEME_SAVE: saveTheme,
+})
+
+export default themeReducer

webpack.common.js

@@ -85,40 +85,40 @@ module.exports = {
           require.resolve('postcss-loader'),
         ],
       },
-      {
+      // {
-        test: /\.less$/,
+      //   test: /\.less$/,
-        exclude: /\.module\.less$/,
+      //   exclude: /\.module\.less$/,
-        use: [
+      //   use: [
-          require.resolve('style-loader'),
+      //     require.resolve('style-loader'),
-          {
+      //     {
-            loader: require.resolve('css-loader'),
+      //       loader: require.resolve('css-loader'),
-            options: {
+      //       options: {
-              importLoaders: 3,
+      //         importLoaders: 3,
-              modules: {
+      //         modules: {
-                mode: 'icss',
+      //           mode: 'icss',
-              },
+      //         },
-            },
+      //       },
-          },
+      //     },
-          require.resolve('postcss-loader'),
+      //     require.resolve('postcss-loader'),
-          require.resolve('less-loader'),
+      //     require.resolve('less-loader'),
-        ],
+      //   ],
-        sideEffects: true,
+      //   sideEffects: true,
-      },
+      // },
-      {
+      // {
-        test: /\.module\.less$/,
+      //   test: /\.module\.less$/,
-        use: [
+      //   use: [
-          require.resolve('style-loader'),
+      //     require.resolve('style-loader'),
-          {
+      //     {
-            loader: require.resolve('css-loader'),
+      //       loader: require.resolve('css-loader'),
-            options: {
+      //       options: {
-              importLoaders: 3,
+      //         importLoaders: 3,
-              modules: true,
+      //         modules: true,
-            },
+      //       },
-          },
+      //     },
-          require.resolve('postcss-loader'),
+      //     require.resolve('postcss-loader'),
-          require.resolve('less-loader'),
+      //     require.resolve('less-loader'),
-        ],
+      //   ],
-      },
+      // },
     ],
   },
   resolve: {