我想從一個第三方用戶界面庫應用樣式:https://www.npmjs.com/package/@clr/ui只在我的應用程序中的特定組件。

為此，我將組件的ViewEncapsulation設置為ShadowDom并導入。應用程序中的css。scss文件:

my-app.component.scss

@import '~@clr/ui/clr-ui.min.css';

不幸的是，在。使用瀏覽器中的檢查器檢查css時，CSS似乎沒有定義，因此一些樣式沒有正確應用。 變量在。但它們是:root元素的一部分。

～@ clr/ui/clr-ui . min . CSS '的示例部分:

:root {
  --clr-color-neutral-0: hsl(198, 0%, 100%);
  --clr-color-neutral-50: hsl(198, 0%, 98%);
}

將組件的ViewEncapsulation更改為None會使所有的樣式都正確應用，但這不是我想要的，因為它也會影響其他組件。

Stackblitz: https://stackblitz.com/edit/clarity-datagrid-5-kcluqk?file = src % 2f app % 2f app . component . ts，src%2Fapp%2Fapp.component.scss，src%2Fpeople.service.ts

我如何能使這工作？