如何修改PrimeNg 14 Sidebar组件的背景颜色

PrimeNG 14的Sidebar背景色默认是应用在内部的.p-sidebar-content容器上，而非组件根元素，这就是你之前方法失效的核心原因。下面是几个可行的解决办法：

方法1：自定义样式类配合::ng-deep（推荐，仅影响当前组件的Sidebar） #

先给Sidebar添加自定义类：

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

接着在组件的样式文件中编写：

:host ::ng-deep .custom-sidebar .p-sidebar-content {
  background: rgb(33, 3, 63);
  /* 可选：修改文字颜色，避免深色背景下文字难以辨认 */
  color: #ffffff;
}

方法2：全局修改（影响项目中所有Sidebar） #

如果希望所有Sidebar都使用该背景色，直接在全局样式文件（如styles.scss）中添加：

.p-sidebar .p-sidebar-content {
  background: rgb(33, 3, 63);
  color: #ffffff;
}

方法3：利用PrimeNG主题变量（符合主题规范） #

若项目使用PrimeNG的SCSS主题，可在自定义主题文件中覆盖变量：

// 先定义自定义变量
$sidebar-bg: rgb(33, 3, 63);
$sidebar-color: #ffffff;

// 导入PrimeNG主题文件，自定义变量会自动覆盖默认值
@import "primeng/resources/themes/lara-light-blue/theme.scss";

你之前的方法失效原因 #

• 内联样式：直接给<p-sidebar>添加的样式作用于根元素，但背景色由内部.p-sidebar-content控制，未覆盖到目标元素。
• 自定义类：仅给根元素添加了类，但未定位到内部内容容器，样式无法生效。
• ng-deep写法：嵌套了重复的.p-sidebar-sm选择器，导致无法匹配到正确的元素。

内容的提问来源于stack exchange，提问作者Tanzeel