feat(layout): ✨ add emotions css-in-js

.eslintrc.js

@@ -46,5 +46,6 @@ module.exports = {
     'react/jsx-one-expression-per-line': 0,
     'react/self-closing-comp': 1,
     'react/jsx-key': 1,
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
 };

build/vite/plugins/index.ts

@@ -8,7 +8,14 @@ import { configSvgPlugin } from './svg';
 export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
   const vitePlugins: PluginOption[] = [];
 
-  vitePlugins.push(react());
+  vitePlugins.push(
+    react({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin'],
+      },
+    }),
+  );
 
   vitePlugins.push(configSvgPlugin());
 

package.json

@@ -17,10 +17,12 @@
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons": "^4.8.0",
+    "@emotion/react": "^11.10.5",
     "@reduxjs/toolkit": "^1.9.0",
     "ahooks": "^3.7.2",
     "antd": "^5.0.1",
     "axios": "^1.2.0",
+    "classnames": "^2.3.2",
     "dayjs": "^1.11.6",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
@@ -35,6 +37,7 @@
     "sort-by": "^1.2.0"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.10.5",
     "@jsxiaosi/commitlint-config": "^0.0.11",
     "@jsxiaosi/eslint-config-prettier": "^0.0.11",
     "@jsxiaosi/eslint-config-ts": "^0.0.11",