如何在nz-modal中编辑ng-zorro组件css？

Question

这是我的demo

通常我用

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

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

可以随心所欲地改变CSS。

但是它对<nz-modal>无效。

Answer 1

您的模态 HTML 是您组件的一部分。这意味着视图封装会像往常一样应用于它。

因此，将其设置为“正常”的设置方式 HTML。

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

请注意，对于第二种样式，您必须使用 ::ng-deep，因为这是库组件中的跨度。