如何更改 PrimeNg 側邊欄的背景顏色

Question

我正在使用 PrimeNg 14 的側邊欄組件。默認情況下，背景顏色為白色。 我希望它是紅色或白色以外的任何東西。 我也遵循了主題的文檔。 要么我做錯了，要么需要其他東西。 請看一看。

HTML：

<p-sidebar [(visible)]="display">
  Sample comtent. <br> Navigation tabs will go here
  <ol>
    <li>home</li>
    <li>contact</li>
    <li>about us</li>
    <li>other controls</li>
  </ol>
</p-sidebar>

我試過這個：

<p-sidebar [(visible)]="display" [style]="{background: 'rgb(33,3,63);'}">
...

還有這個：

<p-sidebar [(visible)]="display" styleClass="p-sidebar-sm">

和

.p-sidebar-sm {
  background: rgb(33,3,63);
}

我也嘗試了 ng deep scoping：

:host ::ng-deep .p-sidebar-sm {
    .p-sidebar-sm {
        background: rgb(33,3,63);
    }
}

但是還是沒有顏色變化。 請投入。

Answer 1

您需要實現PrimeNg theming來自定義顏色。

如果沒有，只需覆蓋bachground中p-sidebar的bachground

樣式.css

.p-sidebar {
  background: rgb(33, 3, 63) !important;
}