如何在动态加载的组件中隔离css

Question

我有一个包含多个版本的 less 库。 我有使用这个库的 V1 的主页。 在某一时刻，页面的一个组件使用了这个库的 V2。 我的问题是，当加载使用 V2 的组件时，样式会应用于整个页面。 不幸的是，该库不向后兼容，因此它破坏了整个页面：|。

是否有可能以某种方式将该内部组件与页面的其余部分隔离开来？

CSS 页面：

谢谢！

Answer 1

您可以在 Inner Page 容器上放置一个唯一标识符（id 或类），并在 V2 CSS 中从该容器级联以仅影响其内容。

#inner-page input { width: 100%; }
#inner-page p { margin-bottom: 20px; }

Or LESS eg:

#inner-page { 
    input {
        width: 100%;
    }
    p { 
        margin-bottom: 20px;
    }
}

这将影响具有唯一 id 的容器中的内容，无论它是否是动态的。