如何覆盖 Angular 2 材质样式?

Posted

技术标签:

【中文标题】如何覆盖 Angular 2 材质样式?【英文标题】:How to overwrite angular 2 material styles? 【发布时间】:2017-09-27 04:01:32 【问题描述】:

我在角材料中有这个选择:

它的代码:

<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 上放置一些类,但没有成功。 我想举个例子来说明如何放置背景颜色或边框,这会给我一个想法。

提前谢谢你

【问题讨论】:

组件 CSS 不起作用? 我完全不知道如何放置选项的边框。 并不是所有Angular生成的html元素都标有组件名,所以组件css的价值有限。 【参考方案1】:

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

试试这个:

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

你也可以和theming一起玩。

【讨论】:

注意:/deep/ 选择器以及&gt;&gt;&gt;::ng-deep 都已被弃用。更多信息here。不幸的是,似乎没有替代品。 最好有一个替代品。如果没有一个,那将是一个很大的错误。 虽然它已被弃用,但这仍然有效,最快最简单的解决方案。 在 Angular 上使用 ::ng-deep .className color: #8d062a !important; 【参考方案2】:

如果您可以使用材料 2 scss 主题解决您的风格问题,那么听到的“正确”方式就是指向该网站的链接。 https://material.angular.io/guide/theming.

但是,我在不希望材质样式覆盖的样式上使用了 !important。

这是我的使用方法:

/*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 上的默认填充。

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

这是另一个讨论 !important 是什么的 *** 问题。

What does !important in CSS mean?

【讨论】:

是的,我发现我必须在任何地方拍打 !important 才能覆盖 Material 样式。这很烦人。【参考方案3】:

修改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')

【讨论】:

我喜欢这个,是迄今为止我见过的最干净的答案。【参考方案4】:

您可以尝试添加此代码。

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

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

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

【讨论】:

【参考方案5】:

/deep/&gt;&gt;&gt;::ng-deep 的***解决方案已被弃用,不应再使用。

The recommended method is now view encapsulation


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

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


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

在您的组件上:

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

Here's a great article on the subject

【讨论】:

此解决方案在某些情况下不是最优的,因为如果正在使用 mat-dialog 组件,它会覆盖父组件的 CSS 样式。更好的解决方案应该是在对话框组件的边界内操作材质组件。【参考方案6】:

每当我必须从 mat-sidenav-container 中删除滚动条时,我都会这样做

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

【讨论】:

很好的解决方案。防止您对该组件中 mat-sidenav-content 的更改干扰 mat-sidenav-content 的其他实例 很高兴它有帮助! @clk【参考方案7】:

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

【讨论】:

【参考方案8】:

你可以使用:

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

【讨论】:

这是一个非常危险的解决方案,因为这会影响整个应用程序中的所有组件。如果你想要这样,你可以在 gobal style.scss 中覆盖。否则,在 ng-deep 前面加上一些选择器。喜欢 :host ::ng-deep 或 .mat-dialog-override::ng-deep...【参考方案9】:

任何在 2020 年寻找更清洁方法的人,请按照材料 mat-select documentation 中的建议使用 panelClass。使用 panelClass 属性

【讨论】:

【参考方案10】:

我在使用 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;
     

【讨论】:

【参考方案11】:

你也可以使用:root

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

【讨论】:

以上是关于如何覆盖 Angular 2 材质样式?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 10 - 对 Angular 材质使用 bootstrap-toggle 样式

如何扩展/覆盖 Angular Material $mdDialog.show 中的默认选项?

覆盖材质 UI 样式的问题

角材质覆盖 SnackBar 组件的默认样式

javascript 使用Styled Components.js覆盖材质UI样式

角度材质未正确加载样式