css - 如何为 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>

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

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

使用 CSS，您可以使用它的类名来选择它:

.myClass {
   color: red;
}

---

样式子元素

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

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

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

.dialogHeader {
  float: left;
}