Angular не инкапсулирует css при использовании инкапсуляции представления

В моем приложении есть два меню.

Оба они используют Primeng Панельное меню

Я изменил их css.

Проблема теперь в том, что после добавления second-menu в мое приложение стиль left-menu изменился.

Я попытался использовать View encapsulation на них обоих, стиль left-menu все еще не инкапсулирован

Вот заголовок первое меню

@Component({
  selector: 'app-left-menu',
  templateUrl: './left-menu.component.html',
  styleUrls: ['./left-menu.component.css'],
  encapsulation: ViewEncapsulation.Emulated

})

Второе меню

@Component({
  selector: 'app-second-menu',
  templateUrl: './second-menu.component.html',
  styleUrls: ['./second-menu.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})

В моем CSS я использую ng-deep и :host

вот пример

:host ::ng-deep .ui-panelmenu-header.ui-state-default:hover {
  background-color: #555555;

} 

Вот такой пример stackblitz

Я не буду добавлять весь CSS, потому что он одинаков для обоих стилей.

не могли бы вы сделать стекблиц? (вы можете использовать это как начало: stackblitz.com/edit/angular-css-view-encapsulation)

ibenjelloun 11.04.2018 12:20

Я добавил демо

Hamza Haddad 11.04.2018 12:34
0
2
411
1

Ответы 1

Использование только ::ng-deep повлияет на все классы в проекте, даже если они не являются потомками компонента, в котором объявлен css. (вот простой stackblitz, воспроизводящий это поведение)

Если вы хотите воздействовать только на дочерние элементы компонента, но не на элементы того же уровня, вам следует использовать :host с ::ng-deep.

Вот форк вашего stackblitz с предложением исправления.

Другие вопросы по теме