React-自定义样式Ag网格标题

Question

这是关于在每行中反应网格列标题NOT单元格。

我有4列，我想将前2个标题的标题颜色设为黑色，将后2个标题的标题颜色设为绿色。

return[
  {
    headerName: 'name',
    field: 'name',   
  },
  {
    headerName: 'age',
    field: 'age',     
  },
  {
    headerName: 'city',
    field: 'city',   
  },
  {
    headerName: 'state',
    field: 'state',
  },
]

试图通过使用.ag-header-group-cell-label来控制CSS，但这会使所有列具有相同的bg颜色。有人说使用headerComponentFramework，如果可以的话可以提供示例吗？

Answer 1

您可以在列定义中使用headerClass属性：

[
  {
    headerName: 'First',
    field: 'first',
    headerClass: 'header-black'
  },
  {
    headerName: 'Second',
    field: 'second',
    headerClass: 'header-green'
  }
]

然后在您的CSS中：

.header-black {
  background-color: black;
}

.header-green {
  background-color: green;
}

https://embed.plnkr.co/T81TLEjln2Jzwdfy/