网格样式-覆盖Ag-grid的样式 [英] Grid Styling - Overwrite style of ag-grid

问题描述

我具有以下样式：

.ag-theme-fresh .ag-row-selected {
    background-color: #bde2e5; 
}`

它来自主题的css样式文件。但是我想用这种样式覆盖它：

It comes from a css style file of a theme. But I want to overwrite it with this style:

.ag-theme-fresh .ag-row-even .ag-row-selected {
  background-color: #1428df;
}

但这没有效果，我的组件使用第一种样式。如何覆盖第一个样式1？我尝试使用！important ，但是它什么也没做。

But it has not effect and my component uses the first style. How can I overwrite the first style 1? I tried with !important but it does nothing.

我应该在CSS开头定义自定义样式吗？文件？

Should I define my custom style at the beginning of the css file?

更新：

我发现我可以使用gridOptions函数。 getRowClass设置要使用的样式类。但是我想解决中心问题（对于我在应用程序中使用的所有角度网格）。有想法吗？

I found I can use the function gridOptions.getRowClass to set the style class to be used. But I would like to solve the issue central (for all the angular grids that I use in my application). Any idea?

推荐答案

您应该使用 ViewEncapsulation

You should use ViewEncapsulation

只需添加到组件中封装：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的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！