如何在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元素一样：只需在子元素中添加一个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;
}