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

Question

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

示例:

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

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

谢谢!

Answer 1

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