[英]Grid Styling - Overwrite style of ag-grid
我有以下风格:
.ag-theme-fresh .ag-row-selected {
background-color: #bde2e5;
}`
它来自一个主题的 css 样式文件。 但我想用这种风格覆盖它:
.ag-theme-fresh .ag-row-even .ag-row-selected {
background-color: #1428df;
}
但它没有效果,我的组件使用第一种样式。 如何覆盖第一个样式 1? 我试过!important
但它什么也没做。
我应该在 css 文件的开头定义我的自定义样式吗?
更新:
我发现我可以使用函数 gridOptions.getRowClass 来设置要使用的样式类。 但我想解决中心问题(对于我在应用程序中使用的所有角网格)。 任何的想法?
你应该使用ViewEncapsulation
只需添加到您的组件encapsulation: ViewEncapsulation.None
:
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: '....',
templateUrl: '....',
styles: [`
.ag-theme-fresh .ag-row-selected {
background-color: #1428df !important;
}
`],
encapsulation: ViewEncapsulation.None
})
要覆盖 ag-grid 使用,您需要使用 ng-deep 作为 angular 组件中定义的样式不要覆盖 ag-grid css
:host ::ng-deep .ag-header-cell-label {
justify-content: center;
}
如果您使用 sass 或 scss,您可以在 style.scss/sass 中覆盖。 这将适用于所有地方
@import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.scss";
@import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
.ag-theme-alpine {
@include ag-theme-alpine(
(
// use theme parameters where possible
alpine-active-color: #c066b2,
)
);
.ag-header-cell-label {
justify-content: center;
}
}
如果您需要在特定网格上进行操作,请更喜欢自定义类并为 ag-grid 创建子类。
您还可以全局应用样式,如果这样做,它将覆盖所有 ag-Grid 组件的样式。 如果您尝试单独设置组件的样式,这可能不是一个选项,但这是提供全局基本样式覆盖的好方法。
此外,您应该尝试使用更具体的选择器,而不是使用重要的。
下面是一个例子:
.ag-theme-alpine > .ag-row.ag-row-selected {
background : red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.