У меня есть родительский контейнер с вложенными компонентами, один из вложенных компонентов использует ag-grid. Мне нужно переопределить стиль .ag-cell, но я не уверен, как это сделать, я пробовал следующее, но это не сработало:
родитель:
<div class = "grid-typeahead-container">
<me-typeahead-simple-control></me-typeahead-simple-control>
</div>
мне-типперед-простой-контроль:
<div class = "form-group">
<label *ngIf = "label">{{ label }}</label>
<div class = "input-group ms-search-control mcl-typeahead">
<input class = "form-control typeahead-simple-input"
[(ngModel)] = "selectedLabel"
[typeahead] = "optionsList"
...
#elem
>
</div>
</div>
scss:
.grid-typeahead-container {
.ag-cell {
background-color: yellow;
}
}
попробуйте: хост >>> .grid-typeahead-container {.ag-cell {цвет фона: желтый; }}
Вы пробовали применять свои стили с помощью :: ng-deep ..ag-cell {} внутри вашего me-typeahead-simple-control.scss?
Я не могу изменить фактический заголовок, поскольку он используется где-то еще, мне нужно переопределить стили только на этой конкретной странице. Ячейка .ag находится в дочернем компоненте, но стили по какой-то причине не сохраняются. Я еще не пробовал углубляться, но попробую.
Похоже, что в вашем HTML-коде нет никаких элементов
.ag-cell
, но если они являются дочерними по отношению к вашему.grid-typeahead-container
, SCSS должен правильно нацеливать их.