如何覆盖角度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;
}

你也可以玩主题.

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问题.

什么!在CSS中重要意味着什么？

Answer 3

最佳解决方案/deep/,>>> 并且::ng-deep已被弃用,不应再使用.

推荐的方法现在是视图封装

编辑:警告词.我建议不要使用此方法(截至2019年1月),因为设置ViewEncapsulation.None会导致任何组件css成为全局样式(它会阻止Angular为组件范围的css创建ng_xxx属性).这将导致全局样式冲突,尤其是对于延迟加载的模块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,
})

这是一篇关于这个主题的精彩文章

Answer 4

您可以使用：

::ng-deep {
 .mat-dialog-container{
   padding: 0px 
 }
}

Answer 5

更改覆盖类（如mat-dialog-container）样式的正确方法是panelClass根据“ 自定义角度材质”组件样式使用：

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

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

使用以下内容打开对话框

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

Answer 6

::ng-deep对我来说就像一个魅力......对于 scss 和 sass 文件。