我正在尝试在Angular组件级别覆盖一些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;
}
我还需要将此样式添加到组件scss中的类cdk-overlay-pane
:
element.style {
min-width: 222.333px;
pointer-events: auto;
font-size: 12px;
top: 115px;
left: 313px;
transform: translateX(-16px);
}
答案 0 :(得分:2)
不能从组件内部为覆盖容器中的内容设置样式,因为覆盖内容不是组件的子级。 overlay容器是页面body
元素的子元素,因此其内容的样式需要保留在您的全局样式中。但是,您可以使用panelClass
的{{1}}属性将样式选择性地应用于叠加容器内的特定选择面板:
MatSelect