以角度5覆盖组件样式

Question

我需要在angular5中覆盖外部组件的样式。我已经尝试过以下代码，但它无法使用。

在这个项目中，viewEncapsulation是默认的，即模拟的。

app.component.html

<app-vivek-button class="testClass">Primary</app-vivek-button>

app.component.css

::ng-deep app-vivek-button.testClass {
    background-color: tomato !important;
    color: teal;
}

的Vivek-button.component.html

<button class="button-style">
  <ng-content></ng-content>
</button>

的Vivek-button.component.css

:host{
    display: block;
}

.button-style {
    min-width: 200px;
    background-color: rgb(60, 114, 230);
    color:#fff;
    height: 32px;
    border: none;
}

试图遵循此question too

中提到的所有方法

Answer 1

尝试在style.css中添加所需的vad，这对应用程序来说是全局的。

    app-vivek-button.testClass {
    background-color: tomato !important;
    color: teal;
}