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

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>.

enter image description here

>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.,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.

Leave a Reply