如何覆盖 PrimeNG p-divider 颜色

Question

问题是如何在 Angular 中覆盖 primeng 的 p-divider 的颜色。使用版本17。

这里是 PrimeNG 中 p-divider 组件的源代码链接 https://github.com/primefaces/primeng/tree/9003438e5f214c4239f64c6e3960dd05a8b07677/src/app/components/divider

查看 chrome devtools，我可以看到应用了这种样式，该样式不在 p-divider 或其 css 文件的源代码中。如果我覆盖 chrome devtools 中的颜色，它会按预期工作。

.p-divider.p-divider-horizontal:before {
    border-top: 1px #e5e7eb;
}

就像我说的，这段代码不在源代码中，但在 primeng 的各种主题的 theme.css 文件中。

在开发工具中你也可以看到这种风格

.p-divider-solid.p-divider-horizontal:before {
    border-top-style: solid;
}

当我尝试覆盖 styles.scss 或组件 css 中的边框颜色样式（使用 ng-deep）时，它会覆盖，但随后 border-top-style 消失，并且所有 p-dividers 在我的组件中消失。

我尝试在全局和通过 ng-deep 添加 border-top-style 并在 devtools 中查看，但它有一条线穿过它并且没有应用。我可以成功地使用 p-divider 覆盖任何其他样式，例如背景颜色等，但不能覆盖 border-top 样式。通常这是覆盖 PrimeNG 样式的一项简单任务，但我不确定我在这里缺少什么？任何帮助将不胜感激！！谢谢！

Answer 1

当我们重写类时，我们必须将

border-type

包含为

solid

，当我们像您提到的那样设置时，它会使

border-type

成为

none

，因此您看不到它。

.p-divider.p-divider-horizontal:before {
    border-top: 1px solid red !important;
}

Stackblitz 演示