問題
innerHTML
を使って表示している DOM の className にスタイルを適用できない問題が起きた
rendered_body = "<div class="code-frame"><div class="highlight"><pre><span></span>$yarn</pre></div></div>"
<div class="content" [innerHTML]="rendered_body"></div>
.content { .code-frame { background-color: black; } }
解決策
- スタイルに
::ng-deep
を使用すると適用できた
::ng-deep .content { .code-frame { background-color: black; } }