CSS 如何覆盖angular 2材质样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43690291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overwrite angular 2 material styles?
提问by Kimy BF
I have this select in angular material:
我在角材料中有这个选择：
Its code :
它的代码：
<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>
And I would like to have this styles in it:
我想在其中包含以下样式：
I tried to put some classes over md-select and md-option, but not worked. I would like to have maybe just an example of how to put the background color or the border and that would give me an idea.
我试图将一些类放在 md-select 和 md-option 上，但没有奏效。我想也许只是一个如何放置背景颜色或边框的例子，这会给我一个想法。
Thank you in advance
先感谢您
回答by André
回答by Avolition
The top solutions of /deep/, >>>and ::ng-deepare being deprecated and should no longer be used.
/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.编辑：警告的话。我根本不建议使用此方法（截至 2019 年 1 月），因为设置 ViewEncapsulation.None 将导致任何组件 css 成为全局样式（它阻止 Angular 为组件范围的 css 创建 ng_xxx 属性）。这将导致全局样式冲突，尤其是延迟加载模块 css。
Our solution to ViewEncapsulation was to override very specific css using highly specific css selectors in 1) global css or 2) creating separate style files for certain views / styles / elements, importing into every component required (e.g. styleUrls: [material-table-override.css, component.css]).
我们对 ViewEncapsulation 的解决方案是在 1) 全局 css 或 2) 为某些视图/样式/元素创建单独的样式文件，导入到所需的每个组件（例如styleUrls: [material-table-override.css, component.css]）中使用高度特定的 css 选择器来覆盖非常特定的 css 。
I used ViewEncapsulation.None to successfully override material table styles within a single component in Angular 6.
我使用 ViewEncapsulation.None 在 Angular 6 中的单个组件中成功覆盖了材料表样式。
On your component:
在您的组件上：
import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
// ...
encapsulation: ViewEncapsulation.None,
})
回答by KJR
If you can solve your style issues with the material 2 scss theming that would be the "right" way hears is a link to there site. https://material.angular.io/guide/theming.
如果您可以使用材料 2 scss 主题解决您的风格问题，那么“正确”的方式就是指向该站点的链接。 https://material.angular.io/guide/theming。
However I used !important on the styles I didn't want materials styles to overwrite.
但是，我在我不希望材料样式覆盖的样式上使用了 !important。
Here is how I used it:
这是我如何使用它：
/*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;
}
I had a situation where a horizontal scroll bar was showing up in the md-sidenav and I got rid of their default padding on the md-dialog.
我遇到过水平滚动条出现在 md-sidenav 中的情况，我在 md-dialog 上去掉了它们的默认填充。
Not the most elegant solution but I hope this helps.
不是最优雅的解决方案，但我希望这会有所帮助。
This is another StackOverflow question that discusses what !important is.
这是另一个 StackOverflow 问题，讨论了 !important 是什么。
回答by Florian Feldhaus
The correct way to change styles of overlay classes like mat-dialog-container is to use panelClassaccording to Customizing Angular Material component styles:
更改诸如 mat-dialog-container 之类的覆盖类样式的正确方法是panelClass根据自定义 Angular Material 组件样式使用：
Add this to your global stylesheet after your theme setup
在您的主题设置后将其添加到您的全局样式表中
.myapp-no-padding-dialog .mat-dialog-container {
padding: 0;
}
Use the following to open the dialog
使用以下命令打开对话框
this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})
回答by KRIPA SHANKAR JHA
::ng-deepworks like a charm for me... for scss and sass file.
::ng-deep对我来说就像一个魅力......对于 scss 和 sass 文件。
回答by heliya rb
you can use:
您可以使用：
::ng-deep {
.mat-dialog-container{
padding: 0px
}
}
回答by Prashanth Damam
You can try adding this code.
您可以尝试添加此代码。
.mat-dialog-container{
padding: 0px !important;
}
If this does not work you can use
如果这不起作用，您可以使用
/deep/.className {
... your code goes here
}
回答by Divyanshu Rawat
I do it this way whenever I have to remove scroll from mat-sidenav-container
每当我必须从中删除滚动时，我都会这样做 mat-sidenav-container
.mat-sidenav-container-classname ::ng-deep mat-sidenav-content {
overflow: hidden;
}
