问题描述

如果您使用了 antd-design-vue UI 组件库，在引入云信 IM UIKit 时可能产生样式冲突。

问题原因

ant-design-vue 的样式文件与 IMUIKit 使用到的 antd 的样式文件产生冲突。

解决方案

1. 在组件引入时，引入 ant-design-vue 的 less 文件和云信 IM UIKit 的 css 文件。

   import 'ant-design-vue/dist/antd.less';
   
   import "@xkit-yx/im-kit-ui/es/style/css";
   

2. 在 vue.config.js 中配置 less-loader，修改 ant-design-vue 前缀。

   // ...
   css: {
       loaderOptions: {
       less: {
           lessOptions: {
           modifyVars: {
               '@ant-prefix': 'xx'
           },
           javascriptEnabled: true,
           }
       }
       }
   }
   

   将 ant-design-vue 样式与 IMUIKit 的 antd 样式通过前缀隔离开，以避免冲突。

3. 在 App.vue 中增加 a-config-provider，并全局配置 ant-design-vue 的前缀为 xx（可自行取符合项目的前缀即可），与步骤 2 相对应。

   <a-config-provider prefixCls="my" :locale="locale">
       <div id="app">
       <router-view />
       </div>
   </a-config-provider>
   
   import { ConfigProvider } from 'ant-design-vue';
   export default {
   components: {
       AConfigProvider: ConfigProvider,
       },
   }
   

   需要同步修改项目中的直接修改的 antd 类名下的样式。