如何单独设置MUI X Data Grid顶部全选复选框样式？

要单独修改表头的全选复选框样式且不影响普通行复选框，可利用MUI X Data Grid的专属CSS类精准定位目标元素：

1. 保留你已实现的表头标题容器样式
2. 通过.MuiDataGrid-columnHeaderCheckbox类定位表头全选复选框，设置匹配表头风格的背景色、边框色及勾选图标颜色

修改后的完整sx配置如下：

sx={{
  '.MuiDataGrid-columnHeaderTitleContainer': {
    backgroundColor: '#014181',
    color: 'white'
  },
  // 仅针对表头全选复选框的样式
  '.MuiDataGrid-columnHeaderCheckbox .MuiCheckbox-root': {
    // 未选中时的边框颜色
    '& .MuiCheckbox-box': {
      borderColor: 'white'
    },
    // 勾选图标的颜色
    '& .MuiSvgIcon-root': {
      color: 'white'
    },
    // 选中状态下的背景色
    '&.Mui-checked': {
      backgroundColor: '#014181',
      '& .MuiSvgIcon-root': {
        color: 'white'
      }
    }
  }
}}

说明 #

• .MuiDataGrid-columnHeaderCheckbox是表头全选复选框所在单元格的专属类，通过它可精准区分表头与普通行的复选框，避免样式污染
• 可根据需求调整backgroundColor、borderColor等值，确保和表头深色背景风格统一

内容的提问来源于stack exchange，提问作者Gopikrishna K S