使用微服務(wù)后,遇到一個(gè)問題,主應(yīng)用和子應(yīng)用的主題色不一致.希望可以通過主應(yīng)用的顏色動(dòng)態(tài)變換子應(yīng)用的主題色
ant-design-pro可以通過config.ts配置全局主題色所有最優(yōu)的方法是可以通過改變主題色,來動(dòng)態(tài)配置.官方最新版本的https://github.com/ant-design/ant-design-pro/releases/tag/v5.2.0已經(jīng)支持了,通過<SettingDrawer>設(shè)置之前的版本不支持直接修改主題色.但是ant-design支持全局修改組件顏色跟著官方的步驟修改配置https://ant.design/docs/react/customize-theme-variable-cn

這個(gè)實(shí)現(xiàn)主要是用<ConfigProvider></ConfigProvider>這個(gè)組件將頁面包起來,設(shè)置一個(gè)前綴,ant會(huì)給所有的組件增加前綴的樣式名.在引入這個(gè)前綴樣式的文件就可以修改顏色了其實(shí)是先寫好兩套樣式,動(dòng)態(tài)改變class類名.例如,<div ></div> 在微服務(wù)顯示時(shí),變?yōu)?lt;div ></div> 引入.pre-defaut的樣式
子應(yīng)用修改child先生成一個(gè)前綴的css文件

lessc --js --modify-var="ant-prefix=custom" node_modules/antd/dist/antd.variable.less modified.css

如果沒有全局裝less 需要先全局裝less npm i less -g執(zhí)行后項(xiàng)目根目錄下會(huì)多一個(gè)custom.css文件
修改global.less文件@import (reference) '~antd/es/style/themes/index';@import './custom.css';
修改app.tsx文件

主應(yīng)用修改

修改app.tsx文件

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

// 設(shè)置前綴,和主題色
ConfigProvider.config({
  prefixCls: 'custom',
  iconPrefixCls: 'custom',
  theme: {
    primaryColor: '#1890ff',
  },
})

這樣就配置好了看一下效果: 主應(yīng)用本身的主題色是藍(lán)色,子應(yīng)用是紅色

現(xiàn)在頁面的顏色已經(jīng)變了,但是菜單沒變因?yàn)樵赼pp.tsx里面,我們用<ConfigProvider></ConfigProvider>包裹的是children,也就是layout里面的東西.layout沒有被包裹在內(nèi)有幾種解決方法,一是自定義layout,不用默認(rèn)的layout.但是這種樣式都要自己寫,如果項(xiàng)目不是很自定義不建議用二是,引入menu.css的,加強(qiáng)樣式層級(jí),覆蓋子組件的樣式.具體實(shí)現(xiàn)找到菜單樣式文件

復(fù)制到一個(gè)新文件里,增加層級(jí).如下,增加一個(gè)id類名包裹.這個(gè)id是你父應(yīng)用的最外層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;
  }
  ...
}

放到項(xiàng)目中,在global.less中引入

import './menu.less';

三. 在父應(yīng)用開啟樣式隔離, 相同類名的樣式就不會(huì)覆蓋了

父應(yīng)用app.tsx

export const qiankun = fetch('/config').then(({ apps }: any) => ({
  // 注冊(cè)子應(yīng)用信息
  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 }, // 開啟沙箱,樣式隔離
  // 完整生命周期鉤子請(qǐng)看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
  lifeCycles: {
    afterMount: (props: any) => {
      console.log(props);
    },
  },
  // 支持更多的其他配置，詳細(xì)看這里 https://qiankun.umijs.org/zh/api/#start-opts
}))

這樣就解決ant-design樣式問題
不過如果你的樣式是自己自定義的,ant是不會(huì)給擬添加前綴需要自己定義一個(gè)變量 例:測試頁面

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

.less文件

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

在子應(yīng)用中 global.less中定義

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

在父應(yīng)用global.less中定義

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

最終效果:子應(yīng)用 父應(yīng)用

githup源碼

父應(yīng)用: https://github.com/shengbid/antpro-parent

子應(yīng)用: https://github.com/shengbid/antpro-child

到此這篇關(guān)于ant-design-pro使用qiankun微服務(wù)配置動(dòng)態(tài)主題色的文章就介紹到這了,更多相關(guān)ant-design-pro微服務(wù)配置動(dòng)態(tài)主題色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！