如何修改Material UI DataGrid表头的背景颜色？

你当前的代码仅能通过& .MuiDataGrid-columnHeader修改表头内部单元格的颜色，要去掉表格的白色背景，需要调整以下样式：

直接在DataGrid的sx配置中添加根容器背景色，并同步单元格的背景设置，确保整体风格统一：

<DataGrid
    rows={users}
    columns={columns}
    disableColumnMenu={true}
    hideFooter={true}
    loading={isLoading}
    autoHeight={true}
    sx={{
      boxShadow: 2,
      border: 2,
      borderColor: "#292524",
      // 添加根容器背景色，覆盖默认白色
      backgroundColor: "#0c0a09",
      "& .MuiDataGrid-cell": {
        color: "white",
        borderColor: "#292524",
        // 同步单元格背景色，避免出现白色区域
        backgroundColor: "#0c0a09",
      },
      "& .MuiDataGrid-columnHeader": {
        backgroundColor: "#0c0a09",
        color: "#75706c",
      },
      // 若虚拟滚动区域仍有白色，可添加此配置
      "& .MuiDataGrid-virtualScroller": {
        backgroundColor: "#0c0a09",
      }
    }}
/>

关键修改说明： #

• 给DataGrid根节点设置backgroundColor: "#0c0a09"，直接替换整体默认白色背景
• 给.MuiDataGrid-cell添加背景色，确保单元格和整体背景一致，避免单元格单独显示白色
• 可选添加.MuiDataGrid-virtualScroller的背景设置，解决虚拟滚动区域可能残留的白色问题

内容的提问来源于stack exchange，提问作者Lui Wei Hon