コンポーネントの.md-dialog-containerにCSSを適用する場所は？

Question

どのコンポーネントにmd-dialog-containerのスタイルを適用しますか？私はすべてを試した：app.component.css、work-modal.component.css、work-details.component.cssおよびstyle.css。これらのどれもmd-dialogのCSSスタイルを変更しません。 Google Chromeの開発ツールでは動作していますが、私のプロジェクトでは動作しません。

助けてください。ありがとう。

work-modal.component.css

/deep/ .md-dialog-container { 
    max-width: 100vw; 
} 


@media screen and (min-width: 768px) { 

    .work-modal-bg { 
    display: flex; 
    flex-flow: column; 
    justify-content: center; 
    height: 200px; 
    text-align: center; 
    } 

    .modal_title { 
    font-size: 45px; 
    letter-spacing: 20px; 
    text-transform: uppercase; 
    } 

    .modal_small_title { 
    font-size: 22px; 
    text-transform: uppercase; 
    text-align: center; 
    text-transform: uppercase; 
    } 

    .work_modal_img { 
    background-size: 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 500px; 
    } 

    .work_modal_container { 
    position: relative; 
    } 

    .work_modal_content { 
    position: relative; 
    max-width: 700px; 
    height: 200px; 
    margin: 0 auto; 
    margin-top: -270px; 
    right: -130px; 
    padding: 60px 55px; 
    background: #fff; 
    } 
} 

work-details.component.ts

import { Component, Inject, OnInit } from '@angular/core'; 
import { listStateTrigger, listFadeTrigger, listStagTrigger } from './work-animation'; 
import { Worklistitem } from '.././work.model'; 
import * as symplCMS from '../../../assets/js/symplcms'; 
import { Observable } from 'rxjs/Observable'; 
import { CMSService } from '../../../services/cms.service'; 
import { CMSProvider } from '../../../providers/cms'; 
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; 
import {WorkModalComponent} from '../work-modal/work-modal.component'; 
import {ViewEncapsulation} from '@angular/core'; 

@Component({ 
    selector: 'app-work-details', 
    templateUrl: './work-details.component.html', 
    styleUrls: ['./work-details.component.css'], 
    encapsulation: ViewEncapsulation.None, 
    providers: [ 
    CMSService, 
    CMSProvider 
    ], 
    animations: [ 
    listStateTrigger, 
    listFadeTrigger, 
    listStagTrigger 
    ] 
}) 
export class WorkDetailsComponent implements OnInit { 
array = []; 
dialogResult: String = ''; 
    constructor(private cmsService: CMSService, public dialog: MdDialog) { } 

    ngOnInit() { 
    this.cmsService.getCMS(9192, (data) => { 
     console.log(data); 
     this.initMap(data); 
    }); 

    } 

    initMap(data: any) { 
    const works = data.works; 
    this.array = works; 
    console.log(this.array); 
    } 

    openDialog(id: number) { 
    const workObj = this.array[id]; 
    const dialogRef = this.dialog.open(WorkModalComponent, { 
     width: '1200px', 
     data: workObj 
    }); 

    dialogRef.afterClosed().subscribe(result => { 
     console.log(`Dialog closed: ${result}`); 
     this.dialogResult = result; 
    }); 
    } 
    } 

Answer 1

は、単にあなたのMdDialogConfigにpanelClassオプションを追加します：

は、ここに私のファイル構造です

const dialogRef = this.dialog.open(WorkModalComponent, { 
    width: '1200px', 
    data: workObj, 
    panelClass: 'my-dialog-container-class' // Replace with your actual dialog container class 
}); 

また、/deep/は廃止し、代わりに::ng-deepを使用するべきであるとされていることを注意してください。

More info