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

Question

它是关于反应 ag 网格列标题而不是每行中的单元格。

我有 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，但这将使所有列具有相同的背景颜色。有人说使用 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/