Angular / SCSS - стиль глубокого вложенного div в компоненте

У меня есть родительский контейнер с вложенными компонентами, один из вложенных компонентов использует 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;
  }
}

Похоже, что в вашем HTML-коде нет никаких элементов .ag-cell, но если они являются дочерними по отношению к вашему .grid-typeahead-container, SCSS должен правильно нацеливать их.

Obsidian Age 01.04.2021 01:52

попробуйте: хост >>> .grid-typeahead-container {.ag-cell {цвет фона: желтый; }}

AlexFF1 01.04.2021 02:24

Вы пробовали применять свои стили с помощью :: ng-deep ..ag-cell {} внутри вашего me-typeahead-simple-control.scss?

AkshAy Agrawal 01.04.2021 10:09

Я не могу изменить фактический заголовок, поскольку он используется где-то еще, мне нужно переопределить стили только на этой конкретной странице. Ячейка .ag находится в дочернем компоненте, но стили по какой-то причине не сохраняются. Я еще не пробовал углубляться, но попробую.

Mankind1023 01.04.2021 15:03
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
4
25
0

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