0

I need to override the styles of components from outside in angular5. I've tried the below code and it's not working.

In this project, the viewEncapsulation is default ie Emulated.

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;
}

Tried to follow all the ways mentioned in this question too

Vivek Kumar
  • 4,822
  • 8
  • 51
  • 85

1 Answers1

0

Try putting required vad in style.css which is global to application. 

    app-vivek-button.testClass {
    background-color: tomato !important;
    color: teal;
}
Naman Kheterpal
  • 1,810
  • 1
  • 9
  • 16