[AiChat] 在引入 ai 组件时会覆盖自定义 css 变量

[Hiram-Wong]

tdesign-vue-next 版本

1.10.6

重现链接

No response

重现步骤

main.js

import { createApp } from 'vue';

import App from './App.vue';
import router from './router';
import { store } from './store';
import i18n from './locales';

import 'tdesign-vue-next/es/style/index.css';
import '@/style/index.less';

import { Tooltip as TTooltip } from 'tdesign-vue-next';

const app = createApp(App);

app.use(store);
app.use(router);
app.use(i18n);
app.use(TTooltip);

app.mount('#app');

index.less中自定义了

:root,:root[theme-mode="light"] {
  --td-font-family: MiSans;
  --td-font-family-medium: MiSans;
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-3);
  --td-brand-color: var(--td-brand-color-4);
  --td-brand-color-active: var(--td-brand-color-5);
  --td-brand-color-1: #e4f9e9;
  --td-brand-color-2: #c8f2d7;
  --td-brand-color-3: #94dab2;
  --td-brand-color-4: #45c58b;
  --td-brand-color-5: #33a371;
  --td-brand-color-6: #008857;
  --td-brand-color-7: #006c44;
  --td-brand-color-8: #005333;
  --td-brand-color-9: #003b23;
  --td-brand-color-10: #002515;
  --td-radius-default: var(--td-radius-medium);
}

:root[theme-mode='dark'] {
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-1: #33a37120;
  --td-brand-color-2: #003b23;
  --td-brand-color-3: #005333;
  --td-brand-color-4: #006c44;
  --td-brand-color-5: #008857;
  --td-brand-color-6: #33a371;
  --td-brand-color-7: #45c58b;
  --td-brand-color-8: #94dab2;
  --td-brand-color-9: #c8f2d7;
  --td-brand-color-10: #e4f9e9;
}

组件

import {
  Chat as TChat,
  ChatAction as TChatAction,
  ChatContent as TChatContent,
  ChatInput as TChatInput,
  ChatItem as TChatItem,
} from '@tdesign-vue-next/chat';

导入ai 组件后，会覆盖掉我的自定义颜色变量 都变成蓝色了
导入 ai 组件前

导入ai 组件后后

期望结果

修复颜色覆盖问题

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @Hiram-Wong，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[uyarn]

看了下现在的实现 这个我们得修改下@tdesign-vue-next/chat 的打包方式 默认不引入CSS Variables的定义