如何为 p-dialog 中的元素添加样式？

Question

我尝试向元素内的p-dialog元素添加样式，但由于 Angular 的 CSS 封装，这些样式似乎没有得到应用。

如何在p-dialog不更改应用程序的 CSS 封装属性的情况下向其中的元素添加样式？

编辑 -

<p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false">
    <p-header style="float:left">
        New Item
    </p-header> 

    <div style="float:left;">
    </div>
    ...
    ...


    <p-footer>
        <button type="button" (click)="display=false">Save</button>
        <button type="button" (click)="display=false">Cancel</button>
    </p-footer>
</p-dialog>

我想对Save和Cancel按钮应用样式。以及p-dialog.

Answer 1

造型 <p-dialog>

一种方法是<p-dialog>使用括号内联样式标记[]：

<p-dialog [style]="{'color':'red'}"></p-dialog>

您还可以p-dialog通过设置styleClass属性来设置元素样式：

<p-dialog styleClass="myClass"></p-dialog>

使用 CSS 选择它的类名：

.myClass {
   color: red;
}

样式化子元素

您可以p-dialog像任何其他 HTML 元素一样设置标签中包含的元素的样式：只需向子元素添加一个 class 属性：

<p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false">
    <p-header class="dialogHeader">
        New Item
    </p-header>
</p-dialog>

并使用 CSS 中的选择器选择它：

.dialogHeader {
  float: left;
}