css - 无法在 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。我尝试在上面添加样式来检查背景颜色，结果是：

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

Answer 1

看文档

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

所以你的CSS是这样的

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

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