0

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

他们都使用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，因为这两种样式都是一样的

4

1 回答 1

0

仅使用::ng-deep将影响项目中的所有类，即使不是声明 css 的组件的子级。（这里是一个简单的 stackblitz 重现这种行为）

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

这是您的 stackblitz 的一个分支，带有修复建议。

于 2018-04-11T11:34:32.133 回答