伙计们， 我们有 2 个项目：Vue.js 中的父项目，其中只有页眉和页脚，以及 React.js 中的子项目，其中是我们插入第一个 Vue.js 项目的内容。
每个项目都有自己的共享组件库，同时它们都基于另一个第三方共享库（两个组件库是一样的，只是版本不同）。
问题是两个组件库都基于相同的（第三个共享库），因此具有几乎相同的样式 - 类名。当我们将 React.js 项目插入 Vue.js 项目时，我们会覆盖这些共享库的 CSS。 React.js 项目中的样式会覆盖 Vue.js 项目中页眉/页脚中的样式。
你能想出任何解决办法吗？像作用域 css 之类的东西？最好在 React.js 中。我们无法编辑共享库。我们试过，将 React.js 项目插入到 Shadow DOM 中。最后两个解决方案有效，但仅仅因为 css 冲突就把它包装成这样似乎太过分了。你认为在这种情况下通过或 Shadow DOM 解决它有意义吗？