ant-design-pro使用qiankun微服務配置動態主題色

使用微服務后,遇到一個問題,主應用和子應用的主題色不一致.希望可以通過主應用的顏色動態變換子應用的主題色

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