Définir le style de menu mat

Im ayant beaucoup de problèmes avec cela, et les solutions apparentes ne fonctionnent pas ou im faire quelque chose de mal (probablement le dernier).Définir le style de menu mat

Je veux le style mes mat-menu et les mat-menu-item s », Ive a essayé de faire ceci:

::ng-deep .mat-menu{ 
    background-color:red; 
}

Mais cela ne fonctionne pas, mon menu ressemble à ceci (rien abornomal)

<mat-menu #infoMenu="matMenu"> 
    <button mat-menu-item> 
    <mat-icon>dialpad</mat-icon> 
    <span>Resume</span> 
    </button> 
    <button mat-menu-item> 
    <mat-icon>voicemail</mat-icon> 
    <span>Portfolio</span> 
    </button> 
    <button mat-menu-item> 
    <mat-icon>notifications_off</mat-icon> 
    <span>References</span> 
    </button> 
    <button mat-menu-item> 
    <mat-icon>notifications_off</mat-icon> 
    <span>Contact</span> 
    </button> 
</mat-menu>

I J'ai également essayé/profond/mais je sais que cela ne devrait pas fonctionner et en fait, il devrait être déprécié dans Angular 4 mais je l'ai fait pour tester, je ne suis pas sûr de savoir comment styliser les éléments à ce stade.

Source

2017-10-19 Cacoon

'.mat-menu panel' pourrait aider, ainsi que l'utilisation' ViewEncapsulation.None' –

l'appel du panneau malheureusement rien ne marche, et je ne sais pas où je mettrais cette viewencapsulation à aucun? D: – Cacoon

Je vais aller de l'avant et écrire une réponse plus détaillée pour toi –

app.component.ts

import { Component, ViewEncapsulation ... } from '@angular/core'; 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

export class AppComponent { 
    constructor() { } 
}

my.component.css

.mat-menu-content { 
    background-color: 'red' !important; 
}

J'utilisent généralement ce pour le style de la hauteur et trop-plein css, mais l'idée générale devrait encore représente la couleur de fond. Veuillez noter qu'il peut y avoir d'autres divs superposés avec des couleurs d'arrière-plan, mais vous devriez pouvoir y accéder de la même façon par leur .mat-menu-<item name> css et changer les éléments enfants de la même manière.

Source

2017-10-19 00:23:01

Merci beaucoup! Je me demandais juste comment modifier aussi la couleur de fondu, il commence à la couleur grise «par défaut» et se fond dans la couleur personnalisée que je définis comme vous avez montré, est-ce juste essai et erreur? Je ne demande pas parce qu'im essayant de vous impliquer mal, je me demandais si vous saviez, merci pour cette solution brillante! – Cacoon

Mise à jour: Son panneau de menu, donc tout merci pour toute l'aide! – Cacoon

Mise à jour 2: J'ai vraiment besoin de vous remercier encore une fois, cette solution me permet enfin de personnaliser tout ce qui est fait dans le matériau 2 facilement et efficacement !! <3 – Cacoon

Définir la couleur d'origine background-color et mouseover aussi bien dans le CSS:

.mat-menu-item { 
    color: blue !important; 
} 

button.mat-menu-item{ 
    background-color: white; 
} 

button.mat-menu-item:hover { 
    background-color: blue; 
    color: #fff !important; 
}

Source

2018-02-26 12:52:06

Définir le style de menu mat

Répondre

Questions connexes