CSS-классы не собраны во время компиляции Angular 5

Question

Я использую ag-grid в своем угловом 5 проекте. Я пытаюсь добавить классы CSS в ячейки. Посмотрев обширную документацию по стилю ячеек ag-grid, я попытался использовать cellClass и cellClassRules.

Стили определены в файле scss, например:

.readonly-cell{ background-color: #cccccc; }

Файл scss включается в компонент:

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss']
})

Затем я применяю класс к столбцу:

{headerName:'Power', field:'power', width:150, cellClass:'readonly-cell'}

Сама сетка работает нормально. Проблема в том, что ячейки power не меняют цвет. Когда я проверяю визуализированный HTML в Firefox, я вижу, что к ячейке действительно применен класс readonly-cell. Но детали стиля не перечислены на панели правил.

Это заставляет меня думать, что классы не подбираются во время компиляции. Я не думаю, что это проблема с ag-grid, но то, как подбираются классы стилей.

Есть ли способ выяснить, почему классы и определения не включены в компиляцию?

Answer 1

Вы получаете такое поведение, потому что элемент, на который вы пытаетесь ориентироваться с помощью правила CSS, генерируется вне вашего Angular-компонента, а Angular добавляет специальные атрибуты, так что CSS-компонент компонента применяется только к этому компоненту (а не к его дочерним компонентам, любые добавленные узлы DOM вне угловых и т. д.). Вы должны либо создать весь HTML-код, который вам нужен для стиля, используя Angular и точно такой же компонент, что и ваши стили, либо отключить эту функцию. Вы можете отключить его, используя ViewEncapsulation.None:

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss'],
  encapsulation: ViewEncapsulation.None
})

или с помощью /deep/ в таблице стилей, как описано здесь:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep