Unable to set background color of content of tabview in Primeng

Question

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:

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?

Answer 1

Looking the docs

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

Answer 2

use this

/* not selected */
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  border-color: white ;
  background: white;
  color: navy;
  }
  /* hover */
  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
  background: orange;
  border-color: brown;
  color: navy;
  }
  /* selected */
  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  background: #3b82f6;
  border-color:#3b82f6;
  color: white;
  }