cssangulartypescriptprimengprimeng-table

Unable to set background color of content of tabview in Primeng

I have created a p-tabview with each tab containing some content. For that I have modified my app.component.html by adding the following code:

<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>

I intend to give a dark background as I have to create the tabview in dark theme. I tried to add styles above to check the background color and the result is: enter image description here

As visible, the portion between the content and the tabview is white in color. I intend to style in such a manner that the entire grid becomes dark. Cyan and red are just sample colors to check where the background color is getting applied against each property. How to change the background color(white currently) between content and tab view boundary?

Solution

  • Looking the docs

    enter image description here

    You should manipulate p-tabview-panels in your scss(or css) of your component our globaly in style.scss (or css).

    So your css is something like this

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

    Read more here in local styling section https://www.primefaces.org/primeng/showcase/#/theming