我想从Angular Material中选择一个选择组件 . 具体来说,我想将包含选项的面板移动到显示所选值的字段下方 .
这个选项列表位于id为“cdk-overlay ...”的div内,这似乎决定了列表的位置 . 这个div的样式是一个element.style属性,我不能用css覆盖它 .
据推测,这个样式属性仍然基于较低级别的某些css . 它在哪里?我该如何改变它?它在哪里记录?
You can see what I am talking about in action on stackblitz
如果您使用的是Angular Material v6,则可以申请:
<mat-select panelClass="options" disableOptionCentering ...></mat-select>
.options 将是div inside 你的cdk-overlay元素 . 然后在你的CSS中你可以添加如下内容:
.options
.options { margin-top: 2em; }
我认为你可以通过在组件样式表中重新定义它并打破视图封装来覆盖css类的属性 .
您-component.scss
.class-to-override { color: white }
您-component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; @component({ ... encapsulation: ViewEncapsulation.None }) export class YourComponent implements OnInit { ... }
2 回答
如果您使用的是Angular Material v6,则可以申请:
.options
将是div inside 你的cdk-overlay元素 . 然后在你的CSS中你可以添加如下内容:我认为你可以通过在组件样式表中重新定义它并打破视图封装来覆盖css类的属性 .
您-component.scss
您-component.ts