如何为下拉小部件创建 (CSS) 样式变体，以使用它来定位其列表行？

Question

如标题所述，我需要为下拉小部件创建 'Compact' 样式变体。但我无法弄清楚如何用它来定位下拉项目（行）。这适用于所有下拉菜单：

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

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

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

这以前对我有用，就像 Tabs-widget 的 header:

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

我怀疑这可能与下拉小部件的列表项不直接 sub-items 有关，但我不确定。

感谢您的帮助！

Answer 1

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

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

How to create a (CSS) style variant for a dropdown widget, to target its list rows with it?