Как перезаписать CSS из main.component.scss в файле scss дочернего компонента

Question

У меня есть файл scss для моего основного компонента моего приложения Angular 6, внутри которого я добавил свойство css для элемента html.Я хочу перезаписать свойство css в файле scss в дочернем компоненте.Я пытался положить :host /deep/ и !important.У меня ничего не работает.Я попытался изменить свойство css из файла .ts, и это сработало.Я хочу перезаписать то же самое только в моем файле scss.

Пример: main.component.scss

.global-content {
  margin-left: 12rem;
}

Это основной файл scss компонента.Я пытаюсь переписать то же свойство css из моего дочернего компонента, как это

child.component.scss

:host /deep/ .global-content {
  margin-left: 2rem !important;
}

Заранее спасибо

Answer 1

Добавьте свою глобальную таблицу стилей

как

app-root app-child .child-div {
   //add whatever css property you want to call
}

Ref: Вы можете проверить здесь

Answer 2

Пожалуйста, прочитайте этот пост о том, как использовать инкапсуляцию с sass в angular.https://blog.angular -university.io / angular-host-context /

А также попробуйте удалить косую черту "/".может работать, а может и не работать, в зависимости от вашей структуры.

:host { 
   deep { 
      .global-content { margin-left: 2rem !important; }
   }
}

Выше приведено только предположение, поскольку я не могу проверить здесь.

или вы можете использовать псевдоэлемент css ng-deep:

:host ::ng-deep .global-content { margin-left: 2rem !important; }

Надеюсь, это поможет.