Просмотр исходного кода

解决样式覆盖问题; npm run prettier

hz 6 лет назад
Родитель
Сommit
c83a1d899a
3 измененных файлов с 30 добавлено и 21 удалено
  1. 15 4
      config/plugin.config.js
  2. 11 12
      src/components/SettingDrawer/themeColorClient.js
  3. 4 5
      src/models/setting.js

+ 15 - 4
config/plugin.config.js

@@ -41,10 +41,21 @@ export default config => {
         outFile,
       },
     ]);
-    config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [{
-      fileName: 'css/theme-colors.css',
-      matchColors: generate('#1890ff'), // 主色系列
-    }]);
+    config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
+      {
+        fileName: 'css/theme-colors.css',
+        matchColors: generate('#1890ff'), // 主色系列
+        // 改变样式选择器,解决样式覆盖问题
+        changeSelector(selector) {
+          switch (selector) {
+            case '.ant-calendar-today .ant-calendar-date':
+              return ':not(.ant-calendar-selected-day)' + selector;
+            default:
+              return selector;
+          }
+        },
+      },
+    ]);
     // config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
     //   {
     //     antDir: path.join(__dirname, '../node_modules/antd'),

+ 11 - 12
src/components/SettingDrawer/themeColorClient.js

@@ -1,22 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import generate from '@ant-design/colors/lib/generate';
-import client from 'webpack-theme-color-replacer/client'
+import client from 'webpack-theme-color-replacer/client';
 
 export default {
   primaryColor: '#1890ff',
-  getAntdSerials (color) {
-    return generate(color)
+  getAntdSerials(color) {
+    return generate(color);
   },
-  changeColor (newColor) {
-    const lastColor = this.lastColor || this.primaryColor
+  changeColor(newColor) {
+    const lastColor = this.lastColor || this.primaryColor;
     const options = {
       cssUrl: '/css/theme-colors.css', // hash模式下用相对路径
       oldColors: this.getAntdSerials(lastColor), // current colors array. The same as `matchColors`
-      newColors: this.getAntdSerials(newColor || this.primaryColor) // new colors array, one-to-one corresponde with `oldColors`
-    }
+      newColors: this.getAntdSerials(newColor || this.primaryColor), // new colors array, one-to-one corresponde with `oldColors`
+    };
     const promise = client.changer.changeColor(options, Promise);
-    this.lastColor = lastColor
-    return promise
-  }
-}
-
+    this.lastColor = lastColor;
+    return promise;
+  },
+};

+ 4 - 5
src/models/setting.js

@@ -1,12 +1,11 @@
 import { message } from 'antd';
 import defaultSettings from '../defaultSettings';
-import themeColorClient from '../components/SettingDrawer/themeColorClient'
+import themeColorClient from '../components/SettingDrawer/themeColorClient';
 
 const updateTheme = newPrimaryColor => {
-  const hideMessage = message.loading('正在切换主题!', 0)
-  themeColorClient.changeColor(newPrimaryColor)
-    .finally(() => hideMessage())
-}
+  const hideMessage = message.loading('正在切换主题!', 0);
+  themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage());
+};
 /*
 let lessNodesAppended;
 const updateTheme = primaryColor => {