html - 如何在Angular6 +中将样式应用于由html字符串生成的元素

Question

嗨，我生成了一个 html 字符串，并分配给 innerHtml。

html模板如下：

<div [innerHtml]="htmlContent"></div>

html字符串如下：

<table class="table table-bordered text-center">
<thead>
<tr>
<th style="text-align:center">Header 1</th>
<th style="text-align:center">Header 2</th>
<th style="text-align:center">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w-10">Cell 11</td>
<td style="text-align:center">Cell 12</td>
<td style="text-align:center">Cell 13</td>
</tr>
<tr>
<td style="text-align:center">Cell 21</td>
<td style="text-align:center">Cell 22</td>
<td style="text-align:center">Cell 23</td>
</tr>
<tr>
<td style="text-align:center">Cell 31</td>
<td style="text-align:center">Cell 32</td>
<td style="text-align:center">Cell 33</td>
</tr>
</tbody>
</table>

我想为一个元素添加类。scss 文件如下：

table .table {
   td .w-10{
    width: 10% !important;
   }
   td .w-15{
    width: 15% !important;
   }
   td .w-20{
    width: 15% !important;
   }
}

但它不起作用。