Угловой 6 - цвет фона элемента html не изменяется с компонентом

Question

У меня есть страница входа и я не могу раскрасить ее фон. Мне удалось покрасить элемент app-login (имя моего компонента login), добавив

:host {
      display: block;
      background-color: blue
}

в мой файл scss. Это было предложено в здесь

Но только фон элемента компонента окрашен. Остальные части страницы остаются белыми. Я могу покрасить HTML-элемент в браузере во время осмотра. Я добавил background-color:blue; к тегу html{}.

Я сделал то же самое с моим файлом .scss, но он не работал. Я также пробовал с! Важный, но он все еще не работает.

Мой файл login.component.scss:

:host {
    display: block;
    background-color: blue;
  }
html{
    background-color: blue !important; // not working
}
.card-container.card {
    max-width: 400px;
    padding: 50px 60px;
}

.card {
    background-color: #F7F7F7;
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 220px; 
}

Answer 1

Согласно документации (https://angular.io/guide/component-styles)

"Стили, указанные в метаданных @Component, применяются только в пределах шаблон этого компонента. "

Это означает, что все, что вы помещаете в свой login.component.scss, влияет только на этот конкретный компонент.

Если вы хотите использовать

html{
    background-color: blue !important;
}

Вы должны поместить его в какой-нибудь глобальный файл стилей (по умолчанию это src / styles.scss).