Angular Elements-外部库的CSS [英] Angular Elements - External library's CSS

问题描述

我希望将Angular Elements与外部库（Kendo UI）一起使用。我设法创建了一个组件并将其添加到我的应用程序中。问题是Kendo的CSS弄乱了我所有的应用样式。

I was hoping to use Angular Elements with an external library (Kendo UI). I managed to create a component and add it to my app. The problem is that Kendo's CSS messed up with all my app styling.

关于如何封装CSS的任何想法都只能应用于组件，而不能泄漏到

Any idea on how could I encapsulate the CSS to only apply to the component and not "leak" to the rest of the parent app?

谢谢

UPDATE

有关代码，请参见以下stackblitz：
https://stackblitz.com/edit/angular-kpmnjg

See the following stackblitz for the code: https://stackblitz.com/edit/angular-kpmnjg

如果我建我得到的代码是4个.js文件和styles.css文件（包含Kendo UI的样式）。将文件添加到干净的html页面中可以正常工作。但是，一旦我将它们添加到我的应用程序中，styles.css就会渗入我的应用程序，并弄乱样式（按钮/输入/等）。

If I build the code I get 4 .js files and styles.css file (containing Kendo UI's styles). Adding the files to a clean html page works fine. But as soon as I add them to my app, the styles.css bleed out to my app, messing with the styles (buttons/inputs/etc).

推荐答案

创建一个 _kendo.scss 并导入所有必要的样式表：

create a _kendo.scss and import all necessary stylesheets:

@import '~@progress/kendo-theme-bootstrap/scss/dropdownlist';
@import '~@progress/kendo-theme-bootstrap/scss/grid';
@import '~@progress/kendo-theme-bootstrap/scss/input';
@import '~@progress/kendo-theme-bootstrap/scss/popup';
@import '~@progress/kendo-theme-bootstrap/scss/tabstrip';
....

您需要安装kendo npm模块才能正常工作。

You need to have the kendo npm modules installed for this to work.

然后使用您的样式。scss

then in your styles.scss

@import './kendo';

更新：

我的猜测是，由于它们是全球进口的，它们正在渗透。因此，假设您有

My guess is that they are bleeding through because they are globally imported. So lets say you have

<kendo-grid>
...
    <table>
      <th>

网格中的样式将渗入您的表，因为kendo会这样做CSS：

The styles from the grid will bleed through to your table because kendo does css as such:

.kendo-grid th {...

真的没有办法解决它，除了创建可怕的反规则以外，我们也必须在项目中这样做。
我们正在摆脱 kendo ，它不太适合角度游戏。

So really there is not a way around it except for creating counter-rules which is more than terrible, we had to do it in our project too. We are getting rid of kendo, it is not well fit for angular.

也许，只需导入

@import '~@progress/kendo-theme-bootstrap/scss/grid';

组件本身并不全局。虽然我还没有测试过。此外，它将在导入它的每个组件中复制SCSS并炸毁捆绑包的大小。

in the component itself an not globally. Although I have not tested that. Also it will replicate the SCSS in every component that imports it and blow up bundle size.

这篇关于Angular Elements-外部库的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！