angular2：style md-dialog

Question

我正在尝试将md-dialog设置为与image1一样          图1

image 1 css class：

   .mat-dialog-container {
        box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
        display: block;
        padding: 24px;
        border-radius: 2px;
        box-sizing: border-box;
        overflow: hidden;
        background: white;
        width: 500px;
        height: 162px;
    }

但浏览器覆盖了我的风格我总是发现浏览器将此css类应用于组件并覆盖我的风格

.mat-dialog-container {
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
    display: block;
    padding: 24px;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: auto;
    max-width: 80vw;
    width: 100%;
    height: 100%;
} 

所以对话框就像图像2： 图2

我将我的样式添加到css文件mat-dialog-container，并且我将其命名为主机，如此

host:{
            box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
            display: block;
            padding: 24px;
            border-radius: 2px;
            box-sizing: border-box;
            overflow: hidden;
            background: white;
            width: 500px;
            height: 162px;
        }

但它总是被覆盖

我的对话框名称为discard-pop-up，代码如下：

discard-pop-up.component.html：

  <h1 md-dialog-title>Discard Changes</h1>
<div md-dialog-content>Are you sure you want to discard changes ?</div>
<div md-dialog-actions>
  <button md-button (click)="dialogRef.close('Option 1')">Yes</button>
  <button md-button (click)="dialogRef.close('Option 2')">No</button>
</div>

discard-pop-up.component.ts：

import { Component, OnInit } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: 'app-discard-pop-up',
  templateUrl: './discard-pop-up.component.html',
  styleUrls: ['./discard-pop-up.component.css']
})
export class DiscardPopUpComponent implements OnInit {
  popUpContent:string;
  popUpTitle:string;
  constructor(public dialogRef: MdDialogRef<DiscardPopUpComponent>) {}

  ngOnInit() {
  }

}

discard-pop-up.component.css：

   .mat-dialog-container {
        box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
        display: block;
        padding: 24px;
        border-radius: 2px;
        box-sizing: border-box;
        overflow: hidden;
        background: white;
        width: 500px;
        height: 162px;
    }

我通过调用此函数在另一个组件中反对它：

     openDialog() {
    let dialogRef = this.dialog.open(DiscardPopUpComponent, {



    //   padding: '24px',
    // border-radius: '2px',
    // box-sizing: 'border-box',
    // overflow: 'hidden',
    // width: '542px',
    // height: '160px',
    // background: 'white',
});
     dialogRef.afterClosed().subscribe(result => {



       this.selectedPopUpOption = result;
     });
  }
}