根据上下文角度动态设置包含第三方组件的组件样式

Question

Edit：这里的困难在于我无法更改第三方组件的类。我需要动态地向类mat-form-field-wrapper添加样式，它是第三方(角材料(组件的一部分

假设我有一个组件；应用程序搜索栏"；，它含有一种角形材料"；垫形式字段"；我想根据搜索栏在我的应用程序中的显示位置来设计特定的风格。我知道我可以使用：ng deep和！重要的标志，但有什么方法可以让我在不同的上下文中动态地应用这些样式吗？

我想要的是这样做的方法：

search-bar.component.ts:

export class SearchBarComponent {
@Input() styles;

search-bar.component.scss

::ng-deep .mat-form-field-wrapper {
width: styles.width;
}

Answer 1

我要做的一件事是为每个场景定义一个类，并从输入组件中获取该类。示例：

@Input() elClass = "my-default-class";

然后在模板中

<child-component [class]="elClass">...

风格：

child-component.my-default-class ::ng-deep {}
child-component.another-class ::ng-deep {}