从我们的组件角度覆盖外部库的样式

Question

我正在使用一个外部面板组件，它将在单击按钮时打开。它具有默认宽度和其他样式属性。有什么方法可以覆盖面板的宽度并用作响应式面板。我想要实现的是以编程方式更改我的组件中面板的宽度。例如，在我的 app.component.html iam 中使用 app.component.html 中的面板容器

panel-container

我如何附加自定义类面板容器类 =“面板宽度”

in.css .panel-width{ 宽度：500 px }

不改变角度默认视图封装

Answer 1

您可以使用:host::ng-deep来设置外部组件的样式。

:host::ng-deep .panel-container {
  width: 500px;
}

它自 2017 年起已弃用，但如果您不想更改 ViewEncapsulation，则没有新方法可以执行此操作。来源：https : //angular.io/guide/component-styles#deprecated-deep--and-ng-deep