SAAS CSSのCSS修正がカスタムクラス名でラップされましたか？

Question

だから私は角度材料md - タブのアクティブなテキストのためのこの長いCSSエレメントセレクターを持っています。タブがアクティブになったときにタブラベルのテキストの色を変更したいのですが、これがセレクタであることがオンラインでわかりました。それは動作しますが、大きなプロジェクトで作業しています。プロジェクトのすべてのmdタブではありません。だから、どのように私はこの長いセレクタをクラス名で囲むことができますか？だから私はこのクラス名を使用するときにこのセレクタは、このセレクタが有効になります。

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon { 
 
    color: rgb(130,152,86) !important; 
 
}

Answer 1

あなたが特定のMD-タブを使用しているところ書かれている、クラスで自分のCSSを包みます。

HTML：

<div class="my-div-used-this-md-tabs"> 
    <md-tabs></md-tabs> 
</div> 

SCSS：

.my-div-used-this-md-tabs { 
    md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon { 
    color: rgb(130,152,86) !important; 
    } 
}