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

Question

编辑：这里的困难在于我无法更改第三方组件的类。我需要为类mat-form-field-wrapper动态添加样式，这是第三方（角度材料）组件的一部分

假设我有一个组件“app-search-bar”，它包含一个角度材料“mat-form-field”，我想根据搜索栏在我的应用中出现的位置以特定方式设置样式.我知道我可以使用 ::ng-deep 和 !important 标志来设置第三方组件的样式，但是有什么方法可以让我在不同的上下文中动态应用这些样式？

我想要一种方法来做这样的事情：

搜索栏.component.ts：

    export class SearchBarComponent {
      @Input() styles;

搜索栏.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 {}