How to edit ng-zorro component css in nz-modal?

Issue

This is my demo

Normally, I use

:host ::ng-deep nz-input-number {
  width: 100% !important;
}

:host ::ng-deep nz-date-picker span.ant-calendar-picker {
  width: 100% !important;
}

will can change CSS as I want.

But it is not working with <nz-modal>.

Solution

Your modal HTML is part of your component. It means the view encapsulation is applied to it like it normally would.

So style it like you would style "normal" HTML.

https://stackblitz.com/edit/angular-9dvf1z-rzp7f3?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.scss

Note that for the second style, you have to use ::ng-deep because this is a span inside a library component.

Answered By - temp_user