とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Angular innerHTML で出力している className にスタイルを適用する

問題

  • 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;
  }
}