对于Angular9+,根据this,您可以使用:
.mat-select-panel {
background: red;
....
}
Demo个
Angular Material uses
mat-select-content
as class name for the select list content. For its styling I would suggest four options.
1. Use 100:
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.
CSS:个
::ng-deep .mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO个
2. Use 100
...组件CSS样式被封装到组件视图中,并且
不影响应用的睡觉.
为了控制该封装如何在每个组件的基础上发生,
您可以在组件元数据中设置视图封装模式.
从以下模式中 Select :
……
无表示Angular 不进行视图封装.Angular 添加了
CSS添加到全局样式.作用域规则、隔离和
前面讨论的保护措施不适用.这本质上是
与将组件样式粘贴到HTML中相同.
无值是打破封装并设置零部件material 样式所需的值.
因此可以在组件的 Select 器上设置:
Typscript:个
import {ViewEncapsulation } from '@angular/core';
....
@Component({
....
encapsulation: ViewEncapsulation.None
})
CSS
.mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO个
3. Set class style in style.css个
这一次你也要"强迫"!important
种款式.
style.css
.mat-select-content{
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
}
DEMO个
4. Use inline style个
<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>
DEMO个