如何修改Kendo下拉列表背景颜色？

Question

我正在使用 Kendo for Angular 14，并且在修改下拉列表的背景颜色时遇到问题。 据我所知，当打开下拉列表对象时，会创建一个名为 kendo-popup 的新 DOW 对象，这是存储填充下拉列表的所有值的位置。 我相信，我希望能够修改这个新对象的背景颜色。 例如，在下图中，红色框内的白色，假设我想将其变为紫色。 怎么把它变成紫色？ 这完全基于用户的“主题”选择。 在该下拉列表之前的应用程序中的某个时刻，用户可能已经选择了一个主题。 我想将该选择应用于应用程序。 这是应用程序中唯一无法更改的对象类型。 我已经尝试过下拉列表本身的背景颜色，但这只会改变绿色框中的颜色。 我尝试更改弹出窗口和同时创建的列表框对象的背景颜色。 我什至尝试过剑道下拉列表中的 popupSettings。 没有运气。 需要明确的是，我正在 scss 样式表中进行这些 css 更改。 如果我抓取 DOM 元素本身，我可以通过 DevTools 更改背景颜色。 只是不通过 scss 文件，即使所有其他元素都按预期更改。 此时我不确定我是如何编写CSS的还是我忽略了其他东西。 如有任何帮助，我们将不胜感激。

Answer 1

您可以通过两种方式完成此操作：

1. 使用

   popupSettings

   输入在您提到的弹出元素上设置一个类，然后在 CSS 中定位该类，如下所示：

HTML：

<kendo-dropdownlist [data]="listItems" [popupSettings]="{ popupClass: 'class-name' }">
</kendo-dropdownlist>

CSS：

::ng-deep .class-name {
    // Change background
}

2. 使用下拉列表的

   appendTo

   输入中的

   popupSettings

   设置，使弹出窗口出现在 DOM 中您想要的任何位置，而不是出现在最顶层，如下所示：

当您使用

appendTo: component

时，弹出窗口将出现在 DOM 中的组件元素下方，因此您可以对其进行样式设置，就好像它是组件的一部分一样。 您可能必须使用

::ng-deep

来穿透视图封装。

您可以在此处阅读有关这两种设置的更多信息。