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

Posted 2023-03-13

【中文标题】无法在 Primeng 中设置 tabview 内容的背景颜色

【英文标题】：Unable to set background color of content of tabview in Primeng

【发布时间】：2020-11-27 15:39:02

【问题描述】：

我创建了一个 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 之间的部分是白色的。我打算以使整个网格变暗的方式设计样式。青色和红色只是用于检查背景颜色应用于每个属性的位置的示例颜色。 如何更改内容和标签视图边界之间的背景颜色（当前为白色）？

【参考方案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

【讨论】：

将背景颜色应用于 p-tabview-panels 就像您建议的那样工作。谢谢。