NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.86k stars 3.91k forks source link

[nzModal] Style cannot apply to modal content #7061

Closed ambersun1234 closed 2 years ago

ambersun1234 commented 2 years ago

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-xmiw8l

Steps to reproduce

What is expected?

What is actually happening?

Environment Info
ng-zorro-antd 12.0.2
Browser Google Chrome Version 95.0.4638.69 (Official Build) (64-bit)

Angular will automatically run sanitize to the content causing the style being removed from the content, although we can use bypassSecurityTrustHtml to make it work, but it will cause the security issue.\ I wonder if there's a better way to achieve this

souhailharrati commented 2 years ago

Simple solution:

  1. add class in nzContent: <b class="content">Some descriptions</b>
  2. add scss script: ::ng-deep .content { color: red; }

Thanks 👍

simplejason commented 2 years ago

The problem is that you are passing html in a string to the nzContent, and angular doesn't trust it. You can pass template to nzContent. https://angular.io/api/platform-browser/DomSanitizer