无法在 Primeng 中设置 tabview 内容的背景颜色

Question

我创建了一个 p-tabview，每个选项卡都包含一些内容。为此，我通过添加以下代码修改了 app.component.html：

<p-tabView class="tabmain" [style]="{'background-color': 'cyan', 'margin-left':'0'}">
    <p-tabPanel header="Godfather I" leftIcon="pi pi-calendar" [style]="{'background-color': 'red'}">
        <div  [style]="{'background-color': 'red', 'margin-left':'0'}">
        Hi. This is the content.
        </div>
    </p-tabPanel>
</p-tabView>

我打算提供深色背景，因为我必须在深色主题中创建 tabview。我尝试在上面添加样式来检查背景颜色，结果是：

可见，内容和 tabview 之间的部分是白色的。我打算以整个网格变暗的方式进行设计。青色和红色只是示例颜色，用于检查每个属性应用背景颜色的位置。如何更改内容和选项卡视图边界之间的背景颜色（当前为白色）？

Answer 1

查看文档

您应该在 style.scss（或 css）的全局组件的 scss（或 css）中操作 p-tabview-panels。

所以你的css是这样的

:host ::ng-deep .p-tabview .p-tabview-panels{
  'background-color': 'red'
}

在本地样式部分阅读更多内容 https://www.primefaces.org/primeng/showcase/#/theming

无法在 Primeng 中设置 tabview 内容的背景颜色

Unable to set background color of content of tabview in Primeng

css

angular

typescript

primeng

primeng-table