web-dev-qa-db-fra.com

Comment modifier la couleur d'arrière-plan du bouton Matériau angulaire en état de survol?

J'ai un bouton angulaire:

<button md-button class="link-btn" >Cancel</button>

.link-btn {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

.link-btn:hover {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

Normalement, il s'agit d'un fond transparent, mais dans l'état hover, un fond gris est affiché? Comment enlever ça?

angularangular-material2
7
jaks

A partir de Angular 6, l’utilisation de/deep/ou ng-deep dans la solution choisie est marquée pour dépréciation . La méthode recommandée consiste à utiliser les styles globaux, comme indiqué dans docs .

Certains composants Matériau angulaire, en particulier ceux basés sur la superposition, tels que MatDialog, MatSnackbar, etc., n'existent pas en tant qu'enfants de votre composant. Ils sont souvent injectés ailleurs dans les DOM. C'est important de garder à l'esprit, car même en utilisant une spécificité élevée et Les sélecteurs de perforation d'ombre ne cibleront pas les éléments qui ne sont pas directs enfants de votre composant. Les styles globaux sont recommandés pour ciblant de tels composants.

Dans le cas spécifique de l'arrière-plan du bouton survolé, je devais utiliser le code suivant dans mon styles.css (feuille de style globale incluse via angular-cli ou directement liée dans index.html). Notez que vous devrez peut-être remplacer primaire par accent ou avertir en fonction du type de palette (color = "primaire" ou color = "accent" ou color = "avertir") utilisée dans le bouton.

.mat-button.mat-primary .mat-button-focus-overlay {
  background-color: transparent;
}

Si vous ne voulez pas que tous les boutons soient affectés, il est préférable d’avoir une classe spécifique comme aucun effet de survol, comme indiqué ci-dessous.

.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
{
  background-color: transparent;
}

Pour chaque bouton matériel qui n'a pas besoin d'effet de survol, vous feriez

  <button mat-button color="primary" class="no-hover-effect">
    No Hover Button
  </button>
5
Srikanth

Les styles de bouton sont encapsulés, vous devez donc utiliser/deep/selector pour modifier les styles internes.

Essaye ça:

.link-btn /deep/ .mat-button-focus-overlay {
    background-color:transparent;
}

Plnkr

Mettre à jour:

Depuis Angular v4.3.0, le sélecteur /deep/ est obsolète et sera remplacé par le sélecteur ::ng-deep. Vous trouverez plus d’informations dans la documentation: Angular Documentation

11
cyr-x

Vous pouvez également utiliser mat-flat-button au lieu de mat-button car le premier n’a pas de mécanisme de recouvrement. Il vous suffit de remplacer la couleur de fond de votre composant, ce qui est un mécanisme beaucoup plus propre que de remplacer globalement les composants superposés créés de manière dynamique et créés par un matériau angulaire.

2
americanslon

Essayez d'ajouter ce qui suit à votre css ...

.mat-button-focus-overlay {
    background-color:transparent;
}

Ou

.mat-menu-item:hover {
     background-color:transparent;
}
1
micko