web-dev-qa-db-ja.com

オーバーレイコンテナのスタイルの変更

仮想キーボードにgitプロジェクトを使用しています（ https://ngx-material-keyboard.github.io/demo/ ）。また、450 * 250ピクセルの小さなデバイスで実行するにはいくつかの問題があります。

最後に、開発ツールを使用してWebブラウザで直接変更すると、cssに必要な変更が見つかりました。

次に、ソースを変更する適切な位置を見つける必要があります。

Angle2-materialのオーバーレイコンポーネントを使用して、キーボードを視覚化します。

Cdk-overlay-containerの位置をコメントアウトすると、動作します：

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

しかし、angularアプリケーションからこれらを上書きすることはできません。提案はありますか？

変更のスクリーンショット

angularangular-material2angular-cdk
9
user1025633

更新された回答

公式文書から：

スタイリングオーバーレイコンポーネント

オーバーレイベースのコンポーネントには、オーバーレイペインをターゲットにするために使用できるpanelClassプロパティ（または同様のプロパティ）があります。

グローバルstyles.cssにcssクラスを追加することにより、デフォルトのダイアログコンテナスタイルをオーバーライドできます。例えば：

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

その後、cssクラスをダイアログにpanelClassパラメーターとして提供する必要があります。

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

詳細については、こちらをお読みください 公式ドキュメント .

元の回答

Component.cssで::ng-deepを使用して、デフォルトのスタイルをオーバーライドします。

::ng-deep .cdk-overlay-container {
    /* Do you changes here */
    position: fixed; 
    z-index: 1000;
}
17
Faisal

コンポーネントスタイルからMaterial CSSクラスをオーバーライドできるようにするには、コンポーネントで View Encapsulation をNoneに設定する必要があります。

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})
1
Andrei Matracaru

Mat-dialogue-containerのスタイリングを変更してパネルクラスを追加し、スタイルを指定するだけで十分な場合、cdk-overlay-containerのスタイリングを変更する場合は、backdropClassを追加すると役立ちます

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

cSSで追加

.popupBackdropClass {
   background-color:yellow
 }
0
Pran R.V

メイン/デフォルトの「Styles.css」を使用することでそれを見つけました。 CDKのスタイル変更（およびマテリアルとアニメーション）が適切に選択されます。 （注意）Angular 4。

0
B Stensrud

Globalと他のcomponent'sスタイルシート、グローバルに設定z-indexから低い値へ（1000）headerの背後にあり、popupコンポーネントスタイルシートでそれを高い値（2000）!importantヘッダーがオーバーレイの後ろにくるようにします。

それは私がそれを解決する方法です。

後でありがとう

0
Awais