Перезаписать свойство класса css для библиотечного компонента в Angular-5
У меня есть выпадающий компонент angular-5 из сторонней библиотеки в моем коде, у этого компонента есть собственный CSS, и из-за его поведения по умолчанию я не могу изменить его CSS (здесь я пытаюсь уменьшить ширину раскрывающегося списка), я попробовал используя также написание другого класса css и встроенного стиля, но это не меняет ширину.
HTML-код, в котором я контролировал свой код: (сторонний выпадающий компонент)
<test-dropdown id = "dropdown" label = "Options Array"
[selectedOption] = "dropdownOptions[0]">
<test-option *ngFor = "let option of dropdownOptions"
[option] = "option" [disabled] = "option.disabled">{{option.label}}
</test-option>
</test-dropdown>
Выше выпадающий компонент после запуска приложения в браузере выглядит так:
<test-dropdown _ngcontent-c4 = "" id = "dropdown" label = "default" ng-reflect-label = "default">
<div class = "test-dropdown" ng-reflect-ng-class = "[object Object]">
<label>DropDown</label>
<div>
<button class = "select">Select...</button>
<div class = "dropdown">
<!--bindings = {
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<test-option _ngcontent-c4 = "" class = "dropdown-btn-vp option ng-star-inserted" style = "min-width: 120px"
ng-reflect-option = "[object Object]">
<button class = "option">
Option One
</button>
</test-option>
<test-option _ngcontent-c4 = "" class = "dropdown-btn-vp option ng-star-inserted" style = "min-width: 120px"
ng-reflect-option = "[object Object]">
<button class = "option">
Option Two
</button>
</test-option>
<!--bindings = {}-->
</div>
</div>
</div>
</test-dropdown>
Короче говоря, я хочу применить стиль css к классам, test-dropdown-> button.select и test-dropdown-> div.dropdown
Ответы 3
Значения формы по умолчанию, скорее всего, взяты из CSS вашего веб-сайта и вряд ли будут заимствовать стиль из сторонней библиотеки).
Можете ли вы показать веб-сайт и код своего класса CSS? будет легче отследить проблему в режиме разработчика Chrome и посмотреть, откуда у него стиль.
Не видя кода, все, что я могу предложить, - это правильно определить стиль CSS, используя следующие теги: #option и #dropdown. Однако я подозреваю, что ваш стиль преобладает над вашей темой. Проверьте страницу в режиме разработчика Chrome [F12] и попробуйте увидеть, какой стиль применяется к кнопкам и раскрывающемуся списку. затем поищите, где в теме находится этот стиль, и либо измените его, либо отмените (используя правила CSS, упомянутые в ответе выше). Удачи.
Этот вопрос основан на Специфика CSS: правила CSS имеют порядок, и если вы хотите, чтобы ваш стиль применялся, вы должны использовать правильные правила CSS.
Вы также должны объединить это с Инкапсуляция представления Angular, чтобы убедиться, что ваш стиль действительно применяется.
Для этого есть несколько решений:
- Используйте идентификатор, указанный в раскрывающемся списке в файле CSS вашего компонента.
- Проверьте свой компонент в браузере и используйте селекторы, чтобы настроить таргетинг на него в глобальном файле CSS.
- Используйте директиву
ngStyleили только для одного свойства[style.property] = "'value'"
РЕДАКТИРОВАТЬ
В вашем случае вы должны добавить свой стиль в свой глобальный файл CSS, style.css (или любое другое расширение, которое у него есть). Ваш селектор будет:
test-dropdown#dropdown div.test-dropdown div button.select {}
спасибо за помощь, я использовал ::ng-deep pseudo-class selector из инкапсуляции углового вида.
В качестве побочного примечания, ng-deep устаревает, вам следует избегать использования этого
Я использовал ::ng-deep pseudo-class selector, ссылался на этот документ https://blog.angular-university.io/angular-host-context для инкапсуляции углового вида.
Ниже приведен фрагмент кода, который позволяет мне перезаписать свойство css с помощью ng-deep.
например, в моем случае <test-dropdown> - это угловой компонент, который принимает по умолчанию класс css .dropdown, теперь я хочу изменить свойство min-width, поэтому я сделал это, используя селектор псевдокласса ng-deep, то же самое и для другого углового компонента.
test-dropdown::ng-deep .dropdown {
min-width: 20%;
}
test-button::ng-deep .test-button {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
text-align: center;
cursor: pointer;
min-width: 20%;
}
test-date-picker::ng-deep .date {
min-width: 100%;
line-height: 1.42857143;
}
test-date-picker::ng-deep .date-picker {
min-width: 100%;
line-height: 1.42857143;
}
ng-deep. Поэтому, несмотря на то, что это решение работает, я рекомендую не использовать его.
не может предоставить общий доступ к веб-сайту из-за разрешений, а код класса css скомпилирован и минимизирован, а компонент angular находится в папке node_modules. Единственный элемент управления, который у меня есть, - это первый упомянутый фрагмент кода и настраиваемый файл класса css. Все это появилось на картинке после того, как я установил пакет npm для этой библиотеки.