css - 将样式添加到 AgGrid 中的特定标题单元格

Question

我正在处理 AgGrid(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;
}

现场演示