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问题，讨论了什么！important is。

What does !important in CSS mean?

Answer 3

不推荐使用/deep/，>>>和::ng-deep的顶级解决方案，并且不应再使用它们。

The recommended method is now view encapsulation

编辑：警告词。我不建议完全使用此方法（截至2019年1月）来设置ViewEncapsulation.None不会导致任何组件css变为全局样式（它会阻止Angular为组件范围的css创建ng_xxx属性）。这将导致全局样式冲突，尤其是对于延迟加载的模块css。

我们对ViewEncapsulation的解决方案是在1）全局css或2）为某些视图/样式/元素创建单独的样式文件中使用高度特定的css选择器覆盖非常特定的css，并导入到每个所需的组件中（例如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）的样式的正确方法是根据Customizing Angular Material component styles使用panelClass：

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

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

使用以下命令打开对话框

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

Answer 5

:: ng-deep 对我来说就像是一个咒语……对于scss和sass文件。

Answer 6

您可以尝试添加此代码。

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

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

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

Answer 7

我在Angular Material中遇到了同样的问题，我检查了select元素，检查了它的类，并试图覆盖材料css类的css规则，甚至尝试使用!important标志来设置样式规则。但这没用。

将所有此类规则从组件移到index.html都对我有用。

.mat-select-value,
    .mat-option-text,
    .mat-standard-chip,
    .mat-input-element,
    .mat-menu-item {
         color: #666 !important;
         font-size: 13px !important;
     }
}

Answer 8

每当我必须从mat-sidenav-container移除滚动条时，我都会采用这种方式

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

Answer 9

您可以使用：

Blog

Answer 10

任何在2020年寻求更清洁方法的人，请按照材料席选择documentation中的建议使用panelClass。使用 panelClass 属性

Answer 11

您也可以使用:root

:root {
    .mat-dialog-container{
        padding: 0px 
    }
}

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

11 个答案: