css - Angular 4: styleUrls が正しく動作しない

Angular 4で奇妙な挙動に出くわしました。次のコンポーネントがあります:

@Component({
    selector: 'user-wallets',
    templateUrl: './user-wallets.component.html',
    styleUrls: [
        './user-wallets.scss'
    ]
})
export class UserWalletsComponent implements OnInit, OnDestroy {

    <!-- component logic... -->
}

そのテンプレートには次のマークアップがあります:

<div class="user-wallets">
    <h2>
        <span jhiTranslate="coinlenderApp.userWallets.home.title">Wallets</span>
    </h2>
    <jhi-alert></jhi-alert>
    <ngb-tabset>
        <ngb-tab *ngFor="let userAccountArr of sourceSystemsUserAccounts">
            <ng-template ngbTabTitle>
               {{ userAccountArr[0].sourceSystem.name }}
            </ng-template>
            <ng-template ngbTabContent>
                <div class="row">
                    <div class="col-md-12 charts-col">
                        Charts here
                    </div>
                </div>
            </ng-template>
        </ngb-tab>
    </ngb-tabset>
</div>

さて、関連付けられたスタイルシート（SCSS）には、次のスタイルがあります：

.charts-col {
    background: black;
}

.tab-pane {
    float: left;
    min-width: 300px;
    background: black;
}

コードは正しく動作しており、タブも正しく表示されています。コンソールにはエラーはありません。

今、奇妙なことに、.charts-col のスタイルは正しく適用されているのに、.tab-pane のスタイルは適用されていません。

.tab-pane は . から生成された DOM オブジェクトです。

しかし、global.scssで.tab-paneにまったく同じスタイルを適用すると、スタイルが反映されます。

さて、私の質問は次の通りです：なぜ .charts-col のスタイルは適用されるのに、.tab-pane のスタイルは適用されないのでしょうか（これは通常 global.scss では機能していますが、コンポーネントの特定のスタイルでは機能していません）？