Css вопрос в угловых 6

Question

В моем угловом 6 приложение. Я создал много компонентов. Для отображения данных я использовал ng2-smart-table.

У меня есть особое требование, чтобы скрыть панель нумерации по умолчанию И отображать пользовательские нумерации страниц.

Для этого я только что установил css в файле SCSS компонента.

::ng-deep .ng2-smart-pagination-nav {
   display: none
}

Но это также влияет на все остальные компоненты.

Пока я не знаю и RND на это, в угловых мы использовали каждый компонент имеет свой файл scss. Итак, мой вопрос, почему это CSS влияет на все другие компоненты также? И как предотвратить в этом вопросе?

Answer 1

Комбинатор / deep / работает с любой глубиной вложенности компонентов и применяется как к дочерним элементам представления, так и к дочерним элементам содержимого компонента

Использование

: host Используйте псевдокласс: host для выбора стилей в элементе, в котором размещается компонент (в отличие от нацеливания на элементы внутри шаблона компонента).

:host ::ng-deep .ng2-smart-pagination-nav {
  display: none
}