解决样式覆盖问题；解决@keyframe内颜色替换无效问题

config/plugin.config.js

@@ -44,15 +44,22 @@ export default config => {
     config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
       {
         fileName: 'css/theme-colors.css',
-        matchColors: generate('#1890ff'), // 主色系列
+        matchColors: getAntdSerials('#1890ff'), // 主色系列
         // 改变样式选择器，解决样式覆盖问题
         changeSelector(selector) {
-          switch (selector) {
+          var fix = {
-            case '.ant-calendar-today .ant-calendar-date':
+            '.ant-calendar-today .ant-calendar-date':
-              return ':not(.ant-calendar-selected-day)' + selector;
+              ':not(.ant-calendar-selected-date)' + selector,
-            default:
+            '.ant-btn:focus,.ant-btn:hover': selector
-              return selector;
+              .split(',')
-          }
+              .map(s => s + ':not(.ant-btn-primary)')
+              .join(','),
+            '.ant-btn.active,.ant-btn:active': selector
+              .split(',')
+              .map(s => s + ':not(.ant-btn-primary)')
+              .join(','),
+          };
+          return fix[selector] || selector;
         },
       },
     ]);
@@ -97,3 +104,12 @@ export default config => {
       },
     });
 };
+
+function getAntdSerials(color) {
+  const colorPalettes = generate(color);
+  // 淡化（即less的tint）
+  const lightens = new Array(9).fill().map((t, i) => {
+    return ThemeColorReplacer.varyColor.lighten(color, i / 10);
+  });
+  return colorPalettes.concat(lightens);
+}

package.json

@@ -127,7 +127,7 @@
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",
     "umi-plugin-ga": "^1.1.3",
-    "webpack-theme-color-replacer": "^1.1.4"
+    "webpack-theme-color-replacer": "^1.1.5"
   },
   "optionalDependencies": {
     "puppeteer": "^1.12.1"

src/components/SettingDrawer/themeColorClient.js

@@ -5,7 +5,12 @@ import client from 'webpack-theme-color-replacer/client';
 export default {
   primaryColor: '#1890ff',
   getAntdSerials(color) {
-    return generate(color);
+    // 淡化（即less的tint）
+    const lightens = new Array(9).fill().map((t, i) => {
+      return client.varyColor.lighten(color, i / 10);
+    });
+    const colorPalettes = generate(color);
+    return lightens.concat(colorPalettes);
   },
   changeColor(newColor) {
     const lastColor = this.lastColor || this.primaryColor;