Question

我的应用程序中有两个菜单。

他们都使用了primeng Panel Menu

我已经改变了他们的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 example

我不会添加所有CSS，因为它在两种风格上都相同

Answer 1

仅使用::ng-deep将影响项目中的所有类，即使不是声明css的组件的子项也是如此。（here is a simple stackblitz reproduting this behavior）

如果您只想影响组件的子元素而不影响同一级别的元素，则应将:host与::ng-deep一起使用。

Here is a fork of your stackblitz with a fix suggestion.

使用View封装时，Angular不会封装css

1 个答案: