Question

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

这个选项列表位于一个id为＆＃34; cdk-overlay ...＆＃34;的div中。这似乎决定了清单的定位。这个div的样式是一个element.style属性，我不能用css覆盖它。

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

You can see what I am talking about in action on stackblitz

Answer 1

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

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

.options将是你的cdk-overlay元素中的div 。然后在你的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 {
    ...
}

如何选择角度材料的样式

2 个答案: