如何在 Angular 中更改 kendo-ui 对话框的背景颜色答案

【问题标题】：How to change the background color of kendo-ui Dialog in Angular如何在 Angular 中更改 kendo-ui 对话框的背景颜色
【发布时间】：2021-03-04 05:56:08
【问题描述】：

我需要更改弹出窗口的背景颜色，我尝试使用[ngStyle] 属性，但是这导致了背景颜色的更改。
经过一番搜索，我发现应用背景- k-window类的颜色属性改变了弹出窗口的bg颜色，但我希望它根据条件改变。我认为我们不能直接将类的定义添加到条件中，它只需要类的名称。
有没有其他方法可以改变弹出窗口的背景颜色。

我尝试过类似的方法。

<kendo-dialog [ngClass]="{'k-window{background-color:red}' : flag = true,'k-window{background-color:green}': flag = false">
</kendo-dialog>

【问题讨论】：

标签： css angular kendo-ui

【解决方案1】：

为方便起见使用 ngClass 指令

<div [ngClass]="'example-class'"></div>

NgClass 也可以同时分配多个静态类名：

<div [ngClass]="['example-class', 'other-class']"></div>

如果我们想根据条件切换 CSS 类，我们传入一个 JavaScript 对象。对象的键是类名，值代表条件。

<div
  [ngClass]="{
  'example-class': condition
}"
></div>

我们也可以使用 ngClass 来根据多个条件分配多个 CSS 类。

<div
  [ngClass]="{
  'example-class': condition,
  'other-class': !condition
}"
></div>

在剑道对话框中试试这个

<div id="kendo-grid"> 
 <kendo-dialog>
</div>

在 CSS 文件中

#kendo-grid .kendo-grid{
 //CSS
}

【讨论】：

问题是kendo-dialog。可以在kendo-dialog上申请吗？

【解决方案2】：

在尝试了一段时间不同的解决方案后，我终于意识到我可以通过覆盖全局 CSS 来改变 kendo-ui 对话框的背景颜色。

我发现负责改变颜色的类是k-window-content

因此，我使用 ::ng-deep .k-window-content{ background-color: 'red'} 覆盖了它，我将这个 CSS 类放在我想要修改的组件中。

但很快我意识到，每当我从这个组件跳转到另一个具有相同对话框的组件时，该对话框的颜色也会发生变化，这是我不想要的。

解决方案
然后我找到了这个解决方案
:host ::ng-deep .k-window-content { background-color: 'red'; }
通过在类声明中添加:host，我能够限制所需组件的背景颜色更改，而不会干扰其他组件中的对话框

【讨论】：