如何为下拉窗口小部件创建（CSS）样式变体，用它来定位其列表行？

Question

正如标题所述，我需要创建一个＆＃39; Compact＆＃39;下拉窗口小部件的样式变体。但我无法弄清楚如何使用它来定位下拉项目（行）。 这适用于所有下拉菜单：

.app-Dropdown-Item {  
  padding: 0px !important;
}

以下是我尝试使用样式变体来定位特定小部件的方式：

.app-Dropdown--Compact .app-Dropdown-Item {
  padding: 0px !important;
}

之前这对我有用，就像Tabs-widget的标题：

.app-Tabs--RedBg .app-Tabs-Header {
  background-color: red;
  color: white;
}

我怀疑它可能与列表项不是下拉窗口小部件的直接子项有关，但我不确定。

感谢您的帮助！

Answer 1

此时似乎无法为下拉项目创建自定义样式变体...因此，单独设置下拉项目的唯一方法是为特定下拉列表编写样式：

.app-PageName-DropdownName-List > .app-Dropdown-Item {
  padding: 0px; /* it seems that this rule works without !important */
}