Угловой материал - переопределить оверлей CSS на уровне компонента - PullRequest
Новая
       8

Угловой материал - переопределить оверлей CSS на уровне компонента

0 голосов
/ 22 сентября 2018

Я пытаюсь переопределить некоторые cdk-overlay css на уровне угловых компонентов, но это не работает - даже если я использую :host ::ng-deep

Материал select раскрывающийся здесь (mat-select-content) является ребенком cdk-overlay-pane: 

<div id="cdk-overlay-0" class="cdk-overlay-pane" style="...">
<div class="ng-trigger ng-trigger-transformPanel ng-tns-c19-5 mat-select-panel ng-star-inserted mat-select-panel-done-animating" ng-reflect-klass="mat-select-panel " style="transform-origin: 50% 6.66667px 0px; font-size: 12px; opacity: 1; min-width: calc(100% + 32px); transform: scaleY(1);">
<div class="mat-select-content ng-trigger ng-trigger-fadeInContent" style="opacity: 1;">
	<mat-option _ngcontent-c15="" class="mat-option mat-selected mat-active" role="option" value="Basic" ng-reflect-value="Basic" tabindex="0" id="mat-option-0">
		<span class="mat-option-text">Basic</span>
			<div class="mat-option-ripple mat-ripple"></div>
	</mat-option>
	<mat-option _ngcontent-c15="" class="mat-option" role="option" value="Advanced" ng-reflect-value="Advanced" id="mat-option-1">
		<span class="mat-option-text">Advanced</span><div class="mat-option-ripple mat-ripple"></div>
	</mat-option>
</div>
</div>
</div>

Я хочу переместить этот CSS из моего файла main.scss на уровень компонента, чтобы он не влиял на другие страницы: 

.cdk-overlay-container.dark-theme{

    .cdk-overlay-pane, .mat-select-content {    //  search panel
        background: black;
        border: .5px solid #323030;        
    } 
}

Но когда я перемещаю его в my.component.scss, ЭТО НЕ РАБОТАЕТ: 

::ng-deep .cdk-overlay-pane, .mat-select-content {    // search panel
        background: black;
        border: .5px solid #323030;        
    }

Мне также нужно добавить этот стиль в класс cdk-overlay-pane в моем компоненте scss: 

element.style {
    min-width: 222.333px;
    pointer-events: auto;
    font-size: 12px;
    top: 115px;
    left: 313px;
    transform: translateX(-16px);
}

1 Ответ

0 голосов
/ 24 сентября 2018

Контент внутри оверлейного контейнера не может быть стилизован из компонента, потому что оверлейный контент не является дочерним по отношению к компоненту.Оверлейный контейнер является дочерним элементом элемента body страницы, поэтому стиль его содержимого должен соответствовать вашему глобальному стилю.Однако вы можете выборочно применять стиль к определенной панели выбора внутри оверлейного контейнера, используя свойство panelClass MatSelect: 

<mat-select panelClass="my-panel-class">...

.my-panel-class .mat-select-content {
    background: black;
    border: .5px solid #323030;        
}
...