PrimeNG Divider组件内容文本背景色修改问题求助

PrimeNG的Divider组件内部会把文本单独放在p-divider-content类的容器里，这就是你之前各种方法失效的核心原因——直接给组件外层或文本加样式，没触达这个内部容器。

直接针对内部文本容器设置样式 #

最直接的方案是通过CSS选中p-divider-content元素，设置背景色并调整内边距覆盖空白：

原生CSS写法

/* 针对水平分割线的文本容器 */
.p-divider.p-divider-horizontal .p-divider-content {
  background-color: #f5f5f5; /* 对应bg-grey-100的颜色值 */
  padding: 0 8px; /* 调整内边距，消除文本两侧的空白区域 */
  border-radius: 4px; /* 可选，添加圆角优化视觉效果 */
}

Angular+Tailwind写法（需样式穿透）

如果你的项目用了Tailwind和Angular，需要用::ng-deep穿透组件封装：

:host ::ng-deep {
  .p-divider-content {
    @apply bg-gray-100 px-3 rounded;
  }
}

为什么之前的方法无效？ #

• 给p-divider加bg-grey-100：组件内部的文本容器是独立元素，不会继承组件本身的背景色，且PrimeNG默认样式可能覆盖了继承值。
• 外层套带背景的div：Divider的文本容器默认背景是白色（或继承自全局默认），会盖住父div的背景。
• 文本套span加背景：span是行内元素，仅包裹文字内容，而文本容器本身有默认空白/内边距，所以span的背景无法覆盖这些区域。

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