我希望将 Angular Elements 与外部库 (Kendo UI) 结合使用。我设法创建了一个组件并将其添加到我的应用程序中。问题是 Kendo 的 CSS 弄乱了我所有的应用样式。
关于如何封装 CSS 以仅应用于组件而不“泄漏”到父应用程序的其余部分,我有什么想法吗?
谢谢
UPDATE
有关代码,请参阅以下 stackblitz: https://stackblitz.com/edit/angular-kpmnjg
如果我构建代码,我会得到 4 个 .js 文件和 styles.css 文件(包含 Kendo UI 的样式)。将文件添加到干净的 html 页面可以正常工作。但是,一旦我将它们添加到我的应用程序中,styles.css 就会渗入我的应用程序,扰乱样式(按钮/输入/等)。
最佳答案
在不了解 Kendo UI 并且只阅读 Angular 元素的情况下,一般来说,我封装 CSS 的方式是使用 SASS 并执行
.angular-element-class {
@import 'path/to/kendo.css';
}
或者希望 Kendo UI 有 SASS api
@import 'path/to/kendo.scss';
.angular-element-class {
@include kendo-mixin-needed-for-angular-element;
}
关于Angular Elements - 外部库的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51676412/