将内部 class 样式更改为溢出：特定 class 可见（对于 PrimeNG）

Question

此问题特定于 PrimeNG 或 angular2 组件。他们的样式是隐藏的，但在文档页面上他们提到了，尽管 quite 含糊不清。这里是url：http://www.primefaces.org/primeng/#/dialog

如何改变组件的样式？

例如，对于对话框组件，我们有样式和样式类：

style       string  null    Inline style of the component.
styleClass  string  null    Style class of the component.

还有一个classui-dialog-content Content element.

现在我想将 ui-dialog-content 溢出样式更改为可见。我该怎么办？

这是 qui文档中不清楚的内容。

我试过创建 class

.dialog-overflow{
  overflow: visible;
}

并设置 <p-dialog styleClass="dialog-overflow" ... 但这显然不起作用，因为它不正确 class (ui-dialog-content).

更新： 我也尝试过此选项但没有成功：

.dialog-overflow .ui-dialog-content {
  overflow: visible;
}

还有这个：

.dialog-overflow >>> .ui-dialog-content {
  overflow: visible;
}

Answer 1

您可以使用您已有的class：

.ui-dialog-content {
    overflow: visible;
}

但我相信你在这里犯了一个错误。 class 不是使用 styleClass="abc" 设置的，而是使用 class="abc" 设置的。但我对 angular 并不太精通，所以我的知识基于 HTML。

因此您应该执行以下操作：

<p-dialog class="dialog-overflow"></p-dialog>

并使用您之前提供的CSS：

.dialog-overflow{
    overflow: visible;
}

Answer 2

实际上，这是解决方案。

p-dialog >>> .ui-dialog-content {
  overflow: visible;
}    

p-dialog >>> .ui-dialog{
  overflow: visible;
}

此组件通过两个嵌套的 div 发生双重溢出。

change internal class style to overflow: visible for specific class (For PrimeNG)