ag-grid-react如何移除表头选择复选框的异常白色边框

问题原因 #

你在列定义中配置的cellStyle仅对列内普通数据单元格生效，表头复选框的异常白色边框来源于ag-grid 25.x版本内置的表头单元格样式、复选框控件默认样式，或是左侧固定列自带的分隔边框，无法通过cellStyle配置覆盖。

解决方案 #

方案1：通过CSS类全局覆盖（最通用）

直接覆盖ag-grid内置类的样式即可：

/* 移除表头复选框单元格本身的边框 */
.ag-header-cell.ag-header-cell-checkbox {
  border: none !important;
}

/* 移除复选框控件自带的边框/阴影 */
.ag-header-cell-checkbox .ag-checkbox-input-wrapper {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 移除左侧固定列自带的右侧分隔边框 */
.ag-pinned-left-header .ag-header-cell {
  border-right: none !important;
}

如果需要限定作用域避免污染全局样式，可给ag-grid组件添加自定义类名（例如custom-ag-grid），再给所有CSS选择器加上该类前缀即可。

方案2：通过列定义的headerClass属性定向配置

不想改全局样式的话，可以直接在当前复选框列的定义中添加自定义表头类：

columnDefs: [
      {
        minWidth: 45,
        maxWidth: 45,
        headerCheckboxSelection: true,
        checkboxSelection: true,
        lockPosition: true,
        pinned: 'left',
        cellStyle: { border: 'none' },
        // 新增自定义表头类
        headerClass: 'no-border-checkbox-header'
      },
]

对应添加CSS：

.no-border-checkbox-header {
  border: none !important;
}
.no-border-checkbox-header .ag-checkbox-input-wrapper {
  border: none !important;
  box-shadow: none !important;
}

如果以上方案仍未解决，可通过浏览器开发者工具选中表头复选框元素，查看实际生效的border或box-shadow属性来源，针对性覆盖对应类的样式即可。

内容的提问来源于stack exchange，提问作者red_wolf