如何设置父组件的样式？

Question

我有一个 3 方控件，我增强了一个组件并对其进行了处理，因此我可以轻松地重用它，而不必在需要时更改任何地方的逻辑。它是一个 angular material 控件，外观是通过 css 样式设置的。所以我正在寻找一种方法来设置父组件与我的组件的样式。

我当前的 css 看起来像下面这样，但我想将它向上移动一个级别，以便我可以从使用我的自定义控件的表单中设置它

mat-button-toggle {
  background: #4CAF50;
  display: initial !important;
  border-radius: 3px !important;
  padding: 4px 0px;
  outline: none;
  }

  mat-button-toggle.mat-button-toggle-checked {
    background: #3f51b5;
    color: #fff;
    outline: none;
}

Answer 1

您可以在父级中使用 ::ng-deep 伪 class 来禁用 Angular 的默认视图封装

:host ::ng-deep mat-button-toggle {
  background: #4CAF50;
  display: initial !important;
  border-radius: 3px !important;
  padding: 4px 0px;
  outline: none;
}

:host ::ng-deep mat-button-toggle.mat-button-toggle-checked {
    background: #3f51b5;
    color: #fff;
    outline: none;
}

如何设置父组件的样式？

How can i set Style of a component from a parent?

css

angular-material

angular