如何覆盖角度2材质样式？

Question

我有角度材料选择：

它的代码：

<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
        <md-option [value]="null" [disabled]="true">
            Descuentos
        </md-option>
        <md-option *ngFor="let option of discounts" [value]="option">
            {{ option }}
        </md-option>
        <md-option [value]="null" [disabled]="true">
            Convenios
        </md-option>
        <md-option *ngFor="let option of agreements" [value]="option">
            {{ option }}
        </md-option>
</md-select>

我想在其中有这样的风格：

我尝试将一些类放在md-select和md-option上，但没有用。我想有一个如何放置背景颜色或边框的例子，这会给我一个想法。

先感谢您

Answer 1

我认为类应该可以工作，但是由于视图封装，你可能需要使用/deep/。

试试这个：

/deep/ md-select.your-class {
  background-color: blue;
}

你也可以玩theming。

Answer 2

如果你可以解决你的风格问题与材料2 scss主题，这将是“正确的”方式听到是一个链接到那里的网站。 https://material.angular.io/guide/theming。

但是我使用了！对于我不希望材质样式覆盖的样式很重要。

这是我如何使用它：

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

我有一种情况，在md-sidenav中出现了一个水平滚动条，我在md-dialog上摆脱了它们的默认填充。

不是最优雅的解决方案，但我希望这会有所帮助。

这是另一个讨论什么是重要的StackOverflow问题。

What does !important in CSS mean?

Answer 3

/deep/，>>>和::ng-deep的顶级解决方案已被弃用，不应再使用。

The recommended method is now view encapsulation

---

Edit: Word of warning. I do not recommend using this method at all (as of Jan 2019) as setting ViewEncapsulation.None will result in any of that components css becoming global styles (it stops Angular from creating ng_xxx attributes for component scoped css). This will result in global style conflict, especially with lazy loaded module css.

我们对ViewEncapsulation的解决方案是在1）全局css中使用高度特定的css选择器覆盖非常具体的css，或者2）为某些视图/样式/元素创建单独的样式文件，导入所需的每个组件（例如styleUrls: [material-table-override.css, component.css]）。

---

我使用ViewEncapsulation.None成功覆盖Angular 6中单个组件中的材质表样式。

在您的组件上：

import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

Here's a great article on the subject

Answer 4

更改叠加类的样式（如mat-dialog-container）的正确方法是根据panelClass使用Customizing Angular Material component styles：

在主题设置后将其添加到全局样式表中

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

使用以下命令打开对话框

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

Answer 5

您可以尝试添加此代码。

.mat-dialog-container{
     padding: 0px !important;
}

如果这不起作用，您可以使用

/deep/.className {
... your code goes here
}

Answer 6

每当我必须从mat-sidenav-container删除滚动时，我就是这样做的

   .mat-sidenav-container-classname ::ng-deep mat-sidenav-content {
      overflow: hidden;
    }