md-Menü override default max-Breite im Winkel 2

Ich bin mit Winkel-2 , Eckig-Material, und ich bin bereit zum anzeigen von mehr Daten im md-Menü und, daher, ich muss die max-Breite des md-Menü auf einen höheren Wert. Seine default-Wert ist 280px.

    <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 
    <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
        <button md-menu-item >
           <div class="row notification-row"> 
             <div>
               <span class="image-container"> Option 1 </span>
             </div>
           </div>
        </button>
    </md-menu>   

In der CSS-Datei, so mache ich das:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

In der Konsole, ich kann erkennen, die Klasse, in der der standardmäßige Wert ist: max-width:280px; , und wenn ich edit es in meine Konsole, es funktioniert perfekt, aber obwohl ich versuche zu überschreiben, es in mein CSS-code, ich bin nicht in der Lage, das zu tun. Ich habe versucht, auch:

.mat-menu-panel{
    max-width: 600px;
} 

Und so:

.cdk-overlay-container .mat-menu-panel{
     max-width:600px;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
}

Wie kann ich diese Standardeinstellung außer Kraft setzen-Wert?

  • Haben Sie versucht !important oder ein stärkeres Selektor (z.B. auch der Eltern etc)?
  • Versuchen Sie, die .mat-menu-panel.notifications-dropdown Stile zu einem globalen stylesheet anstelle der Komponente styles. Siehe auch dieser Anleitung
  • Ja, ich habe versucht, es auf diese Weise: .mat-menu-panel.notifications-dropdown { max-width:600px !important; width: 100vw; margin-left: -8px; margin-top: 24px; overflow: visible; }
  • Ich habe es mit <style> tags in meiner index.html. Kein Ergebnis.
  • Ja, wenn ich es zu diesem Zeitpunkt nicht in meine index.html mit` <style> tags, aber ich habe es in meiner globalen CSS-Datei, es funktionierte. Ja, das ist die Antwort. Danke, @WillHowell !
Schreibe einen Kommentar