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

Question

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

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

编辑-

<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>

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

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

有了 CSS 你 select 它和它的 class 名字:

.myClass {
   color: red;
}

---

样式化子元素

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

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

and select it with the selector in CSS:

.dialogHeader {
  float: left;
}