I recently migrated from MUI v4 to v5 and I had a DataGrid with a style that looked like this:

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>
                )
            }
        }
    ];

This worked and the background color for the actions was indeed white. However when I migrated to MUI v5, I see a gray background. I tried to use styled components like this:

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

But now the "header-fix" class doesn't even appear. If I set it like this:

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

Then it appears but it is crossed out, like you can see in the screenshot:

Setting the !important property doesn't work either. I am running out of ideas. What am I doing wrong? Why this used to work in v4 but not in v5?

EDIT: this does not work either:

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