使用微服務後,遇到一個問題,主應用和子應用的主題色不一致.希望可以通過主應用的顏色動態變換子應用的主題色
ant-design-pro可以通過config.ts配置全域性主題色 所有最優的方法是可以通過改變主題色,來動態配置.官方最新版本的https://github.com/ant-design/ant-design-pro/releases/tag/v5.2.0已經支援了,通過<SettingDrawer>設定 之前的版本不支援直接修改主題色.但是ant-design支援全域性修改元件顏色 跟著官方的步驟修改配置https://ant.design/docs/react/customize-theme-variable-cn

這個實現主要是用<ConfigProvider></ConfigProvider>這個元件將頁面包起來,設定一個字首,ant會給所有的元件增加字首的樣式名.在引入這個字首樣式的檔案就可以修改顏色了 其實是先寫好兩套樣式,動態改變class類名. 例如,<div class="default"></div> 在微服務顯示時,變為<div class="pre-defaut"></div> 引入.pre-defaut的樣式
子應用修改child 先生成一個字首的css檔案 lessc --js --modify-var="ant-prefix=custom" node_modules/antd/dist/antd.variable.less modified.css 如果沒有全域性裝less 需要先全域性裝less npm i less -g 執行後項目根目錄下會多一個custom.css檔案
修改global.less檔案 @import (reference) '~antd/es/style/themes/index'; @import './custom.css';
修改app.tsx檔案

主應用修改
修改app.tsx檔案

// 引入元件
import { ConfigProvider } from 'antd';

// 設定字首,和主題色
ConfigProvider.config({
  prefixCls: 'custom',
  iconPrefixCls: 'custom',
  theme: {
    primaryColor: '#1890ff',
  },
})

這樣就配置好了 看一下效果: 主應用本身的主題色是藍色,子應用是紅色

現在頁面的顏色已經變了,但是選單沒變 因為在app.tsx裡面,我們用<ConfigProvider></ConfigProvider>包裹的是children,也就是layout裡面的東西.layout沒有被包裹在內 有幾種解決方法, 一是自定義layout,不用預設的layout.但是這種樣式都要自己寫,如果專案不是很自定義不建議用 二是,引入menu.css的,加強樣式層級,覆蓋子元件的樣式.具體實現 找到選單樣式檔案

複製到一個新檔案裡,增加層級.如下,增加一個id類名包裹.這個id是你父應用的最外層id

#root-master {
  /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
  /* stylelint-disable no-duplicate-selectors */
  /* stylelint-disable */
  /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline 
 
*/
  a {
    text-decoration: none;
  }
  ...
}

放到專案中,在global.less中引入 import './menu.less'; 三. 在父應用開啟樣式隔離, 相同類名的樣式就不會覆蓋了 父應用app.tsx

export const qiankun = fetch('/config').then(({ apps }: any) => ({
  // 註冊子應用資訊
  apps: [
    {
      name: 'child', // 唯一 id
      // entry: '//localhost:8091', // html entry
      entry:  entryUrl[NODE_ENV || 'development'], // html entry
      props: {
        isMenu: false,
        accountInfo: {
          autoLogin: true,
          password: "ant.design",
          type: "account",
          username: "admin"
        }
      }
    },
  ],
  sandbox: { strictStyleIsolation: true }, // 開啟沙箱,樣式隔離
  // 完整生命週期鉤子請看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
  lifeCycles: {
    afterMount: (props: any) => {
      console.log(props);
    },
  },
  // 支援更多的其他配置，詳細看這裡 https://qiankun.umijs.org/zh/api/#start-opts
}))

這樣就解決ant-design樣式問題
不過如果你的樣式是自己自定義的,ant是不會給擬新增字首 需要自己定義一個變數 例: 測試頁面

<div className={style.back}>
  自定義樣式
</div>

.less檔案

  .back {
    height: 100px;
    background-color: var(--chid-primary-color); // 將顏色寫成變數
  }

在子應用中 global.less中定義

html {
  --chid-primary-color: #f26;
}

在父應用global.less中定義

#root {
  --chid-primary-color: #1890ff;
}

最終效果: 子應用 父應用

githup原始碼

父應用: https://github.com/shengbid/antpro-parent

子應用: https://github.com/shengbid/antpro-child