web-dev-qa-db-fra.com

Changer le style du conteneur de superposition

J'utilise un projet git pour un clavier virtuel ( https://ngx-material-keyboard.github.io/demo/ ). Et j'ai quelques problèmes pour le faire fonctionner sur un petit appareil avec 450 * 250 pixels.

À la fin, j'ai trouvé les modifications nécessaires dans le fichier CSS si je le modifiais directement sur le navigateur Web avec les outils de développement.

Maintenant, je dois trouver la bonne position pour changer les sources.

Le composant de recouvrement de angular2-material sera utilisé pour visualiser le clavier.

Si je commente la position dans le conteneur cdk-overlay, cela fonctionne:

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

}

Mais je ne peux pas les écraser depuis mon application angulaire ... Des suggestions?

Capture d'écran des modifications

angularangular-material2angular-cdk
6
user1025633

RÉPONSE MISE À JOUR

De la documentation officielle: 

Styling des composants de superposition 

Les composants basés sur la superposition ont un panelClass propriété (ou similaire) pouvant être utilisée pour cibler le volet de superposition.

Vous pouvez remplacer les styles de conteneur de dialogue par défaut en ajoutant une classe CSS dans votre global styles.css. Par exemple: 

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

Après cela, vous devrez fournir votre classe css en tant que paramètre panelClass à votre boîte de dialogue:

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

Lisez ceci documentation officielle pour plus d'informations. 

REPONSE ORIGINALE

Utilisez ::ng-deep dans votre composant.css pour remplacer les styles par défaut. 

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

Pour pouvoir remplacer les classes CSS Material de vos styles de composant, vous devez définir le View Encapsulation sur Aucun sur votre composant:

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

J'ai constaté qu'en utilisant les styles/styles "Styles.css" principaux/par défaut pour le CDK (ainsi que Matériau et Animations), ils sont correctement pris en compte. (avertissement) J'utilise Angular 4.

0
B Stensrud