Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – DataGrid. How change background color of header?

I need to change this white background Image Ref

<DataGrid
    rows={users}
    columns={columns}
    disableColumnMenu={true}
    hideFooter={true}
    loading={isLoading}
    autoHeight={true}
    sx={{
      boxShadow: 2,
      border: 2,
      borderColor: "#292524",
      "& .MuiDataGrid-cell": {
        color: "white",
        borderColor: "#292524",
      },
      "& .MuiDataGrid-columnHeader": {
        backgroundColor: "#0c0a09",
        color: "#75706c",
      }
    }}
/>

& .MuiDataGrid-columnHeader changes the color, but only of inner header cells

Tags:

2

Answers


  1. 0

    mui concider blank space as a filler not as a column header, so You need to change color of MuiDataGrid-filler class also

    Login or Signup to reply.
  2. 0

    The DOM hierarchy is:

    <div class="MuiDataGrid-columnHeaders">
   <div role="row" class="..."> <!-- this is where actual background is set -->
      <div class="MuiDataGrid-columnHeader">
      <div class="MuiDataGrid-columnHeader">
      <div class="MuiDataGrid-columnHeader">
      <div class="MuiDataGrid-filler">
      <div class="MuiDataGrid-scrollbarFiller">
   </div>
</div>

    You must change the background of the <div role="row" inside the MuiDataGrid-columnHeaders to change the background of the whole header row area.

    & .MuiDataGrid-columnHeaders div[role="row"] {
   background-color: #0c0a09;
}

    Otherwise, you must change the background of MuiDataGrid-filler class along with your previous code. (Not Recommended)

    & .MuiDataGrid-columnHeader,
& .MuiDataGrid-filler {
    background-color: #0c0a09;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search