Разница между глобальным файлом scss и файлом scss для компонента в Angular - PullRequest
Новая
       36

Разница между глобальным файлом scss и файлом scss для компонента в Angular

0 голосов
/ 10 ноября 2018

В недавнем проекте Angular 7 у меня есть компонент (определенный в файле file-list.component.ts), в котором есть mat-paginator (компонент из библиотеки компонентов Angular Material). Когда я хочу изменить цвет фона mat-paginator, я сначала попытался поставить 

.mat-paginator-container {
  background-color: yellow;
}

в film-list.component.scss (таблица стилей, связанная с этим компонентом), цвет фона пагинатора не изменился. Когда я вставил это в app.component.scss, это тоже не сработало. Но когда я помещаю его в src/styles.css, цвет фона корректно меняется.

Итак, мои вопросы:

  • В чем разница между src/styles.scss, app.component.scss и film-list.component.scss?
  • Каков объем каждого из этих файлов?
  • Какое влияние оказывает селектор body, используемый в этих файлах таблиц стилей?

1 Ответ

0 голосов
/ 10 ноября 2018

ЦСИ / styles.scss

Для глобального CSS, который будет применяться ко всему приложению и всем компонентам. Здесь вы можете применить стиль к body без проблем.

example.component.scss

Это CSS, который будет ограничен и применен только к этому конкретному компоненту. Здесь вы не сможете применить стиль к элементу body.

Вы все еще можете пробить границы границ ...

При использовании таких компонентов, как mat-paginator внутри, скажем, например, example.component.ts, CSS из mat-paginator фактически находится "вне" области действия example.component.ts компонента, поскольку mat-paginator имеет свою собственную область. Таким образом, вы можете пробить теневой дом, используя :: ng-deep , чтобы применить CSS.

Рабочий пример с кодом ниже: https://stackblitz.com/edit/angular-stackoverflow-53241725

/* not working because the class is not directly inside this component */
.mat-paginator-container {
  background: yellow;
}

/* working because `ng-deep` pierce through the shadow-dom */
::ng-deep .mat-paginator-container {
  background: red;
}

Предлагаемая документация

Официальная угловая документация по стайлингу: https://angular.io/guide/component-styles

Отличный блог, объясняющий инкапсуляцию CSS: https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700

...