md-menuはデフォルトの最大幅を角2でオーバーライドします

Question

私は角度2を使用していますが、角度のある素材を使用していますので、md-メニューでさらにデータを表示したいので、 md-menuをより高い値に設定します。デフォルト値は280pxです。

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

.notification-row{ 
    width: 424px; 
} 

コンソールで、私はデフォルト値が設定されているクラスを識別することができます：max-width: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> 

CSSファイルでは、私はこれを行います私はCSSコードでそれを上書きしようとしますが、私はそれを行うことができません。私はまた、これを試してみました：

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

そして、この：

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

どのように私は、このデフォルト値を上書きすることができますか？

Answer 1

設定するコンポーネントのなしにView Encapsulation：

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

.notification-row{ 
    width: 424px; 
} 

ビューカプセル化=なし角がないことを意味しません：あなたは試してみました正確に何ができるコンポーネントのCSSに続いて

@Component({ 
    templateUrl: './my.component.html' , 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None, 
}) 

ビューなし カプセル化。 AngularはCSSをグローバルスタイルに追加します。スコープの範囲 前述の規則、隔離および保護は適用されません。この は、基本的にコンポーネントのスタイルをHTMLの に貼り付けるのと同じです。