refactor: 更改主题为 @chakra-ui/react

BREAKING CHANGE: 更改主题为 `@chakra-ui/react`

components/App.js

@@ -9,8 +9,8 @@ import api from '@mxjs/api';
 import {InternalServerError, NotFound} from '@mxjs/ret';
 import {PageLoading} from '@mxjs/loading';
 import {ModalSwitch} from '@mxjs/router-modal';
-import {ThemeProvider} from '@emotion/react';
 import PropTypes from 'prop-types';
+import {ChakraProvider, extendTheme} from '@chakra-ui/react';
 
 const LoadableLoading = (props) => {
   if (props.error) {
@@ -77,7 +77,7 @@ export default class App extends React.Component {
 
   async componentDidMount() {
     const config = await this.config;
-    this.setState({theme: Object.assign(this.state.theme, config.theme)});
+    this.setState({theme: extendTheme(Object.assign(this.state.theme, config.theme))});
   }
 
   loadableComponent = (props) => {
@@ -133,13 +133,14 @@ export default class App extends React.Component {
     const Component = this.loadableComponent;
 
     return (
-      <ThemeProvider theme={this.state.theme}>
+      /* 暂不启用 reset，由于先加载了 antd，启用后会覆盖 antd 的默认样式 */
+      <ChakraProvider theme={this.state.theme} resetCSS={false}>
         <Router history={history}>
           <ModalSwitch>
             <Route component={Component}/>
           </ModalSwitch>
         </Router>
-      </ThemeProvider>
+      </ChakraProvider>
     );
   }
 }

package.json

@@ -8,23 +8,26 @@
     "test": "jest"
   },
   "devDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@miaoxing/dev": "^6.3.4",
+    "@sentry/browser": "^5.12.1",
     "@types/execa": "^2.0.0",
     "chalk": "^4.0.0",
     "chalk-theme": "^0.2.3",
     "chokidar": "^3.3.1",
     "execa": "^4.0.0",
+    "glob": "^7.1.6",
     "globby": "^11.0.0",
-    "@miaoxing/dev": "^6.3.4",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
-    "@sentry/browser": "^5.12.1",
-    "react-loadable": "^5.5.0",
-    "@emotion/react": "^11.1.5",
-    "glob": "^7.1.6"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-loadable": "^5.5.0"
   },
   "jest": {
     "preset": "jest-preset-miaoxing"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.4.2",
+    "framer-motion": "^4.1.2"
   }
 }