向ag-grid中的特定标题单元格添加样式

Question

我正在一个网格（AgGridReact组件）上工作，其中一个标题单元格具有一个“全选”复选框。

想知道是否有一种方法可以使全选复选框与列中的复选框对齐。

Answer 1

您可以将headerClass添加到特定的列定义中，并照常应用css样式

const columnDefs = [
  {
    checkboxSelection: true,
    headerCheckboxSelection: true,
    headerClass: "checkbox",
    width: 70
  },
  {
    headerName: "ID",
    field: "id",
    width: 70
  },
  ...
}

CSS

/* add role attribute to increase specificity */
.ag-header-cell.checkbox[role="presentation"] {
  padding: 20px;
}

实时演示