Как я могу переопределить цвет p-разделителя PrimeNG

Вопрос в том, как я могу переопределить цвет 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 — несложная задача, но я не уверен, чего мне здесь не хватает? Любая помощь будет принята с благодарностью!! Спасибо!

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мы должны включить border-type как solid, когда мы переопределяем класс, когда мы устанавливаем, как вы упомянули, это делает border-type как none, поэтому вы не можете его увидеть.

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

Демо-версия Stackblitz

Черт, это было быстро. Очень понравилась библиотека! Большое спасибо!

JMIII 02.07.2024 21:04

Другие вопросы по теме