如何使用嵌入vuetify应用解决冲突的CSS

问题描述

我有一个Vuetify应用客户可以嵌入在其网站上。

问题的：

有时可能发生的情况是我们的 Vue 应用程序与客户网页的 CSS 冲突。通用类的名称，如row，col，或container弄乱他们的设计。

溶液A：

我们可以通过在通用类名前加上唯一的父元素来解决这个问题。我们可以在我们的CSS文件前缀一切运行一些正则表达式。所以.row{} 为#unique-parent-div .row {}，它解决了在我们一边的问题。

问题B：

但是，如果问题是周围的其他方法，并与我们的Vue公司的应用程序主机网页矛盾是什么？我们无法对客户网页进行更改。我们可以问他们，但它会很讨厌我们的客户。

我们无法去改变我们的类名称或者是因为这是vuetify会发生什么：

  <v-layout row wrap>
   <v-col cols="12" class="pa-0">

Vuetify自动打开到这些HTML与泛型类的名称，如row，col和layout，它得到了客户的CSS到我们的应用，打破了设计。

有什么办法可以解决这个问题吗？或许改变VUE默认类名，或以某种方式阻止宿主CSS？

我的尝试

我尝试没有任何成功在我的根元素设置此（和若干变化）：

#root-element,#root-element::before,#root-element::after,#root-element *
#root-element *::before,#root-element *::after {
  all: initial;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）