如何选择角度材料的样式

Question

我想从Angular Material中选择一个选择组件。 具体来说，我想将包含选项的面板移动到显示所选值的字段下方。

这个选项列表位于id为“cdk-overlay ...”的div内，这似乎决定了列表的位置。 这个div的样式是一个element.style属性，我不能用css覆盖它。

据推测，这个样式属性仍然基于较低级别的某些css。 它在哪里？ 我该如何改变它？ 它在哪里记录？

您可以在stackblitz上看到我正在谈论的内容

Answer 1

如果您使用的是Angular Material v6，则可以申请：

<mat-select panelClass="options" disableOptionCentering ...></mat-select>

.options将是您的CDK-覆盖元件内的股利。 然后在你的CSS中你可以添加如下内容：

.options {
   margin-top: 2em;
}

Answer 2

我认为你可以通过在组件样式表中重新定义它并打破视图封装来覆盖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 {
    ...
}