外部コンポーネントのカプセル化されたCSSをオーバーライドする

Question

私は、外部コンポーネントのカプセル化されたCSSをどのように上書きするのかと思いました。

私のプロジェクトでmaterial2を使用しています。タブコンポーネントには、属性オーバーフローがtab-bodyに設定されています。オーバーフロー値をオーバーライドすることは可能ですか？

Answer 1

特別なCSS /deep/命令を使用することができます。 See the documentation

だから、あなたは

app sub-component target-component <div class="target-class">...</div>

を持っている場合は、アプリのCSS（以下）に置くことができます。

明らか

/deep/ .target-class { width: 20px; background: #ff0000; }

、あなたはsub-componentで、このCSSフラグメントを置くことができます同じように。

Answer 2

外部コンポーネントによってタブに適用されているクラスをチェックします（インスペクタまたは他のツールを使用）。あなたのスタイルのCSSファイルでは、タブのクラスの同じ名前を追加し、オーバーフロープロパティを設定して、それに重要なものを追加して、前の名前を上書きするようにします。また、ページへのあなたのCSSのリンクが、もしあれば外部のコンポーネントのCSSのリンクの後に追加されていることを確認してください。

これが役に立ちます。