如何在 Ag-Grid 中指定一个标题的样式？答案

【问题标题】：How to specify the style of just one header in an Ag-Grid?如何在 Ag-Grid 中指定一个标题的样式？
【发布时间】：2020-01-23 10:51:57
【问题描述】：

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

例子：

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

如何仅将这种样式应用于一个列标题？

谢谢！

【问题讨论】：

请分享您页面的链接或代码，以便我提供更好的解决方案。现在，通过检查您添加的代码，我可以说您的代码将使用此类 .ag-header-cell-label 设置所有样式。因此，您可以向该列添加更多不同的类，或者使用伪类对其进行相应的样式设置。

标签： css header ag-grid-angular

【解决方案1】：

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

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

【讨论】：

感谢您的回答！没错，实际上我可以使用 headerClass 属性应用样式。但是我试图将标题对齐到左边，但我没有找到任何方法来做到这一点。我很确定这是一个 CSS 问题，但如果您有任何建议，我们将非常欢迎！

【解决方案2】：

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

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;
}

【讨论】：

【解决方案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

【讨论】：