如何覆盖 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/
选择器以及>>>
和::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/
、>>>
和 ::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 中的默认选项?