Angularで innerHTMLするとCSSが効かない問題の対処法

AngularでinnerHTMLの中のイメージのサイズを修正しようとしてもできない問題が起こりました

この部分では効くのですが、やはりinnnerHTMLの中だと効かないっぽいです

 <div class="post-image">
      <img src="{{post?.post_image[0]?.image['url']}}">
 </div>

</div>

<div class="post format-gallery">
    <div class="post-content">
        <h1 class="post-title">{{post?.title}}</h1>
        <ul class="meta">
            <li class="categories" *ngFor="let tag of post?.tags">カテゴリー: <a
                routerLink="/blog/category/{{tag.name}}"> {{tag.name}}</a></li>
            <li>{{post?.created_at | date: 'yyyy-MM-dd'}}</li>
        </ul><!-- /.meta -->
        <div class="post-image">
            <img src="{{post?.post_image[0]?.image['url']}}">　
        </div>
        <div class="body-image">
            <p [innerHTML]="post?.body"></p>
        </div>
    </div><!-- /.post-content -->
</div><!-- /.post -->

<h1 class="post-title">{{post?.title}}</h1>

<li class="categories" *ngFor="let tag of post?.tags">カテゴリー: <a

routerLink="/blog/category/{{tag.name}}"> {{tag.name}}</a></li>

<li>{{post?.created_at | date: 'yyyy-MM-dd'}}</li>

</ul>

</div>

</div>

</div>

</div>

調べてみたところ以下のようにCSS記述すると問題なく使えるようにナルトのことで、実行したところ無事にサイズが修正されました！

:host /deep/ .post-content {
    img {
        text-align: center;
        width: 100%;
        height: auto;
        overflow: hidden;
        margin-bottom: 30px;
    }
}

.similar-image {
    img {
        width: auto;
        height: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}