Angular Material - 在组件级别覆盖覆盖 css [英] Angular Material - Override the overlay css at the component level
问题描述
我试图在 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-选择面板" 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">基本</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">高级</span><div class="mat-option-ripple mat-ripple"></div></mat-option>
我想将这个 css 从我的 main.scss
文件移动到组件级别,这样它就不会影响任何其他页面:
.cdk-overlay-container.dark-theme{.cdk-overlay-pane, .mat-select-content {//搜索面板背景:黑色;边框:.5px 实心 #323030;}}
但是当我将它移动到 my.component.scss 中时,它不起作用:
::ng-deep .cdk-overlay-pane, .mat-select-content {//搜索面板背景:黑色;边框:.5px 实心 #323030;}
我还需要将此样式添加到我的组件 scss 中的 cdk-overlay-pane
类:
element.style {最小宽度:222.333px;指针事件:自动;字体大小:12px;顶部:115px;左:313px;变换:translateX(-16px);}
覆盖容器内的内容不能从组件内设置样式,因为覆盖内容不是组件的子级.覆盖容器是页面 body
元素的子元素,因此其内容的样式需要驻留在您的全局样式中.但是,您可以使用 MatSelect
的 panelClass
属性有选择地将样式应用于覆盖容器内的特定选择面板:
....my-panel-class .mat-select-content {背景:黑色;边框:.5px 实心 #323030;}
I am trying to override some cdk-overlay
css at the Angular component level, but it doesn't work - even if I use :host ::ng-deep
The material select
dropdown here (mat-select-content
) is a child of 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>
I want to move this css from my main.scss
file into the component level, so it doesn't affect any other pages:
.cdk-overlay-container.dark-theme{
.cdk-overlay-pane, .mat-select-content { // search panel
background: black;
border: .5px solid #323030;
}
}
But when I move it into my.component.scss, IT DOESN'T WORK:
::ng-deep .cdk-overlay-pane, .mat-select-content { // search panel
background: black;
border: .5px solid #323030;
}
I also need to add this style to class cdk-overlay-pane
in my component scss:
element.style {
min-width: 222.333px;
pointer-events: auto;
font-size: 12px;
top: 115px;
left: 313px;
transform: translateX(-16px);
}
Content within the overlay container cannot be styled from within a component because the overlay content is not a child of the component. The overlay container is a child of the page's body
element, so style for its content needs to reside in your global style. However, you can selectively apply style to a specific select panel inside the overlay container using the panelClass
property of MatSelect
:
<mat-select panelClass="my-panel-class">...
.my-panel-class .mat-select-content {
background: black;
border: .5px solid #323030;
}
这篇关于Angular Material - 在组件级别覆盖覆盖 css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!