样式未应用于通过网络调用注入的HTML

在我的angular 8.1.3应用程序中，我正在注入HTMLdiv，我想将样式应用于HTML负载中使用的类

但是，除非我将样式放在项目的根级别CSS中，否则不会应用样式。（我不想这么做）

Sub-component.html

<div id="ImgBlock" class="col-xs-12">
      <div> [innerHTML]="ImagePayload"></div>
</div>

下面是父组件，它创建子组件的一个实例，并在ImagePayload变量中注入HTML负载

       @Component({
       selector: 'parentComponent',
       templateUrl: './parentComponent.html',
       styleUrls: ['./parentComponent.scss'],
       encapsulation: ViewEncapsulation.None
     })
     export class parentComponent implements OnInit, OnDestroy { 

    showImage(data: Somedata) {
      const dialog: DialogRef = this.dialogService.open({
       title: 'recognise Image data ',
       content: SubComponent,
    });

      const info = dialog.content.instance;
      info.ImagePayload = data.challenge;
    }
   }

下面是imagePayload变量中使用的类的css样式

  input.Image_selection_checkbox {
            width: 15px;
        }

我把同样的风格运用到我的作品中

1） SubComponent.scss

2） parentComponent.scss

3） app.component.scss （指成分）

4） 此特定子项目的style.scss （项目也有多个子项目）

但是他们都没有被申请

但是当我将相同的样式放在root style.scss（主项目目录的）中时 它正在得到应用

我对封装的作用有一个有限的概念。那是罪犯吗

还有什么问题

  input.Image_selection_checkbox {
            width: 15px;
        }