CSS Angular Material 中的造型垫选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46766597/
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
Styling mat-select in Angular Material
提问by Marcin Kapusta
How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this:
如何设置 mat-select 的面板组件的样式。从我得到的文档中，我需要提供 panelClass 所以我这样做：
<mat-form-field>
<mat-select placeholder="Search for"
[(ngModel)]="searchClassVal"
panelClass="my-select-panel-class"
(change)="onSearchClassSelect($event)">
<mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
</mat-select>
</mat-form-field>
I inspected in developer tools that this class is attached to the panel in DOM and it is attached. So I have my custom scss class attached to this element. Now when I provide css it just don't work. My scss for example looks like this:
我在开发人员工具中检查了这个类附加到 DOM 中的面板并且它是附加的。所以我有我的自定义 scss 类附加到这个元素。现在，当我提供 css 时，它就不起作用了。例如，我的 scss 如下所示：
.my-select-panel-class {
width:20px;
max-width:20px;
background-color: red;
font-size: 10px;
}
The width of the panel is always equal to the widthof the select element. Sometimes In options You have too long strings and I would like to make it a little bit wider. Is there any way how to do this. My style from my component just not working even background-coloris not working. Does somebody knows why this behaves so strange?
面板的宽度总是等于width选择元素的宽度。有时在选项中你有太长的字符串，我想让它更宽一点。有什么办法可以做到这一点。我的组件中的样式甚至background-color不起作用。有人知道为什么这表现得如此奇怪吗？
I'm using: Angular 4.4.5 @angular/material: 2.0.0-beta.12
我正在使用：Angular 4.4.5 @angular/material：2.0.0-beta.12
回答by Vega
For Angular9+, according to this, you can use:
对于 Angular9+，根据这个，你可以使用：
.mat-select-panel {
background: red;
....
}
Angular Material
mat-select-contentmat-select-content用作选择列表内容的类名。对于它的造型，我建议四个选项。1. Use ::ng-deep:
1. 使用::ng-deep：
Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
使用 /deep/ shadow-piercing 后代组合器将样式强制向下穿过子组件树进入所有子组件视图。/deep/ 组合器适用于嵌套组件的任何深度，它适用于组件的视图子项和内容子项。仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。Emulated 是默认的也是最常用的视图封装。有关更多信息，请参阅控制视图封装部分。不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。在那之前 ::ng-deep 应该是首选，因为它与工具更广泛地兼容。
CSS:
CSS：
::ng-deep .mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
2. Use ViewEncapsulation
... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.
... 组件 CSS 样式被封装到组件的视图中，不会影响应用程序的其余部分。要控制这种封装如何在每个组件的基础上发生，您可以在组件元数据中设置视图封装模式。从以下模式中选择： .... None 表示 Angular 不进行视图封装。Angular 将 CSS 添加到全局样式中。前面讨论的范围规则、隔离和保护措施不适用。这本质上与将组件的样式粘贴到 HTML 中相同。
None value is what you will need to break the encapsulation and set material style from your component. So can set on the component's selector:
None 值是您打破封装并从组件设置材料样式所需的值。所以可以在组件的选择器上设置：
Typscript:
打字稿：
import {ViewEncapsulation } from '@angular/core';
....
@Component({
....
encapsulation: ViewEncapsulation.None
})
CSS
CSS
.mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
3. Set class style in style.css
3.在style.css中设置类样式
This time you have to 'force' styles with !importanttoo.
这次你也必须“强制”风格!important。
style.css
样式文件
.mat-select-content{
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
}
4. Use inline style
4. 使用内联样式
<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>
回答by Lee Grindon
Put your class name on the mat-form-field element. This works for all inputs.
将您的类名放在 mat-form-field 元素上。这适用于所有输入。
