如何更改垫扩展面板中间的背景颜色(展开时)?
How do I change the Background Color of the middle of mat-expansion-panel (when expanded)?
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
如何更改 mat-panel-description
区域(并且 仅 mat-panel-description
区域使其背景颜色不同(例如红色)?
我尝试了各种样式,但似乎无法更改特定背景的整个背景(同时保持页眉和页脚的原始颜色)。
使用 chrome 开发工具,为以下 .mat-expansion-panel-body
作品添加背景色,例如:
.mat-expansion-panel-body {
background-color: red;
}
但是当我尝试将其放入我的样式表(或什至通过内联样式)时,这不起作用。
注意:当我将其放入我的全局样式表 (styles.css) 时,这也有效——但我想尽可能避免这样做。
这是一个 screenshot,其中有一个红色圆圈,表示我要为其更改背景颜色的区域。
谢谢
将封装 属性 添加到您的 @Component 装饰器中
encapsulation: ViewEncapsulation.None
然后您可以简单地在 css 文件中添加样式。
.mat-expansion-panel-body {
background-color: red;
}
希望对您有所帮助!!
在 Angular 中使用 /deep/ 更改 material 组件的样式以在不更改封装的情况下使用仿真封装强制样式下降,所以试试这个:
/deep/ .mat-expansion-panel-body {
background-color: red;
}
或 ::ng-deep 因为 /deep/ 已弃用
::ng-deep .mat-expansion-panel-body {
background-color: red;
}
我最终使用全局样式解决了这个问题,但使用特定于组件的 class 作为父项(以防止覆盖所有出现的 .mat-expansion-panel-body
)
我选择这种方法是因为我不想使用已弃用的 ng-deep 或弄乱我的组件的封装。
扩展-概述-example.component.html
<div class="expansion-overview-example">
<p>This is the primary content of the panel.</p>
</div>
styles.css
.expansion-overview-example .mat-expansion-panel-body {
background-color: red;
}
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
如何更改 mat-panel-description
区域(并且 仅 mat-panel-description
区域使其背景颜色不同(例如红色)?
我尝试了各种样式,但似乎无法更改特定背景的整个背景(同时保持页眉和页脚的原始颜色)。
使用 chrome 开发工具,为以下 .mat-expansion-panel-body
作品添加背景色,例如:
.mat-expansion-panel-body {
background-color: red;
}
但是当我尝试将其放入我的样式表(或什至通过内联样式)时,这不起作用。
注意:当我将其放入我的全局样式表 (styles.css) 时,这也有效——但我想尽可能避免这样做。
这是一个 screenshot,其中有一个红色圆圈,表示我要为其更改背景颜色的区域。
谢谢
将封装 属性 添加到您的 @Component 装饰器中
encapsulation: ViewEncapsulation.None
然后您可以简单地在 css 文件中添加样式。
.mat-expansion-panel-body {
background-color: red;
}
希望对您有所帮助!!
在 Angular 中使用 /deep/ 更改 material 组件的样式以在不更改封装的情况下使用仿真封装强制样式下降,所以试试这个:
/deep/ .mat-expansion-panel-body {
background-color: red;
}
或 ::ng-deep 因为 /deep/ 已弃用
::ng-deep .mat-expansion-panel-body {
background-color: red;
}
我最终使用全局样式解决了这个问题,但使用特定于组件的 class 作为父项(以防止覆盖所有出现的 .mat-expansion-panel-body
)
我选择这种方法是因为我不想使用已弃用的 ng-deep 或弄乱我的组件的封装。
扩展-概述-example.component.html
<div class="expansion-overview-example">
<p>This is the primary content of the panel.</p>
</div>
styles.css
.expansion-overview-example .mat-expansion-panel-body {
background-color: red;
}