React - 自定义样式 ag 网格 header

Question

它是关于 react ag 网格列 header 不是每行中的单元格。

我有 4 列，我想将前 2 的 header 背景设为黑色，最后 2 的 header 背景设为绿色。

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

试图通过使用 css 来控制 ag-header-group-cell-label，但这会使所有列的背景颜色相同。有人说使用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/