如何在 Ag-Grid 中仅指定一个 header 的样式？

Question

我想在我的网格上仅指定一列的 Header 样式。 我知道如何为特定网格的所有列配置 Header 样式。 为此，有必要在“styles:scss”文件中添加以下内容：

例子：

#IdOfGrid .ag-header-cell-label {
justify-content: left;} 

如何仅将这种样式应用于一列 header？

谢谢！

Answer 1

根据https://www.ag-grid.com/javascript-grid-column-properties/

您可以将 headerClass 属性添加到列属性中，并为该 class 添加 css 它仅适用于该列 header

Answer 2

在 columnDefs 内的headerClass属性中有一个 CSS class ，如下所示：

columnDefs = [
{
  headerName: "Table Name",
  headerClass: "table-header",
  field: "tableName"
},
 .
 .
 .
]

在 css 中，如果您的 ag-grid-angular 组件包含在不同的元素中，请使用::ng-deep以及另一个组件/类名称。 就我而言，我得到了这样的风格：

::ng-deep .main-wrapper app-custom-grid ag-grid-angular .table-header {
  background-color: blue;
}

Answer 3

要设置列基本样式，只需给出：

headerName: 'Title Here',
field:'title',
styleCss: { background: '#eee'; 'font-size': '15px' }

如果要在某些条件下赋予样式，则需要一个外部函数，并在列定义中调用它，如下所示：

constructor(){
  this.gridOptions = {

    getRowStyle: (params: any) => {
      if (params.data){
        if(params.data.flag) {
          return { background: '#eee', 'font-weight': 750 };
        }
      }
    }
  }// end of gridoptions
}// end of constructor

有关更多详细信息，请深入了解我的另一个答案： https://stackoverflow.com/a/61236065/7118138