Recientemente migré de MUI v4 a v5 y tenía un DataGrid con un estilo que se veía así:

 const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, "& .header-fix": { backgroundColor: 'rgba(255, 255, 255, 0)', }, }, })); const dataGridColumns = [ { field: 'id', hide: true }, { field: 'name', headerName: 'name', width: 200 }, { field: 'actions', headerName: 'actions', headerClassName: "header-fix", disableColumnMenu: true, width: 150, disableClickEventBubbling: true, renderCell: (params) => { const id = params.row.id; return ( <div> <Tooltip title='Edit'> <IconButton aria-label="edit" onClick={() => editItem(id)}> <EditIcon /> </IconButton> </Tooltip> <Tooltip title='Delete'> <IconButton aria-label="delete" onClick={() => deleteItem(id)}> <DeleteIcon /> </IconButton> </Tooltip> </div> ) } } ];

Esto funcionó y el color de fondo de las actions era blanco. Sin embargo, cuando migré a MUI v5, veo un fondo gris. Traté de usar componentes con estilo como este:

 const StyledDataGrid = styled(DataGrid)({ ".header-fix": { backgroundColor: "rgba(255, 255, 255, 0)"} });

Pero ahora la clase "corrección de encabezado" ni siquiera aparece. Si lo configuro así:

 const StyledDataGrid = styled(DataGrid)({ "& .header-fix": { backgroundColor: "rgba(255, 255, 255, 0)"} });

Luego aparece pero está tachado, como se puede ver en la captura de pantalla:

Establecer la propiedad !important tampoco funciona. Me estoy quedando sin ideas. ¿Qué estoy haciendo mal? ¿Por qué esto solía funcionar en v4 pero no en v5?

EDITAR: esto tampoco funciona:

 const StyledDataGrid = styled(DataGrid)({ "& .header-fix": { backgroundColor: "rgba(255, 255, 255, 0); !important" }, "& .MuiDataGrid-columnHeader--moving": { backgroundColor: "rgba(255, 255, 255, 0); !important" } });