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

【问题标题】：Override style of an external library from our component angular从我们的组件角度覆盖外部库的样式
【发布时间】：2020-05-06 13:05:52
【问题描述】：

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

panel-container

如何附加自定义类面板容器类 ="面板宽度"

在.css .面板宽度{ 宽度：500 像素 }

不改变角度默认视图封装

【问题讨论】：

【解决方案1】：

在你的组件中定义样式，尝试传递为

<ExternalPanelComponent [styles]="myStyles">

myStyles = {
  prop: { width: '500px' }
};

您没有写下组件的名称，所以.. 检查 style/s 或类似属性。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

找到解决方案。我们可以在父 CSS 文件本身中覆盖相同的内容。不要使用 ng deep，因为它已被弃用

【讨论】：