Вопрос в том, как я могу переопределить цвет p-разделителя Primeng в Angular. Используем версию 17.
Вот ссылка на исходный код компонента p-делителя в PrimeNG. https://github.com/primefaces/primeng/tree/9003438e5f214c4239f64c6e3960dd05a8b07677/src/app/comComponents/divider
Заглянув в инструменты разработчика Chrome, я вижу, что применяется этот стиль, которого нет в исходном коде p-divider или его CSS-файле. Если я переопределяю цвет в инструментах разработчика Chrome, он работает так, как ожидалось.
.p-divider.p-divider-horizontal:before {
border-top: 1px #e5e7eb;
}
Как я уже сказал, этого кода нет в исходном коде, но он есть в файлах theme.css Primeng для различных тем.
В devtools вы также можете увидеть этот стиль.
.p-divider-solid.p-divider-horizontal:before {
border-top-style: solid;
}
Когда я пытаюсь переопределить стиль цвета границы в style.scss или в моих компонентах css (используя ng-deep), он переопределяется, но затем стиль border-top исчезает, и все p-разделители исчезают в моем компоненте.
Я попытался добавить стиль border-top обратно как глобально, так и через ng-deep и посмотреть в devtools, но через него есть линия, и он не применяется. Я могу успешно переопределить любые другие стили с помощью p-разделителя, такие как цвет фона и т. д., но не стиль border-top. Обычно переопределить стили PrimeNG — несложная задача, но я не уверен, чего мне здесь не хватает? Любая помощь будет принята с благодарностью!! Спасибо!
Мы должны включить border-type
как solid
, когда мы переопределяем класс, когда мы устанавливаем, как вы упомянули, это делает border-type
как none
, поэтому вы не можете его увидеть.
.p-divider.p-divider-horizontal:before {
border-top: 1px solid red !important;
}
Черт, это было быстро. Очень понравилась библиотека! Большое спасибо!