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

时间:2019-12-30 22:53:43

标签: reactjs ag-grid ag-grid-react

这是关于在每行中反应网格列标题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,如果可以的话可以提供示例吗?

1 个答案:

答案 0 :(得分: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/