'MUI DataGridPro useResizeContainer - The parent of the grid has an empty width

I am begging you to help me because I have been looking for an answer for 3 days, and I can't fix this.

Problem: MUI: useResizeContainer - The parent of the grid has an empty width. You need to make sure the container has an intrinsic width. The grid displays with a width of 0px.

Description Here is a screenshot of my table, it placed in MUI Side Drawer, and how can we see there is no 0px width or something related to it as I was inspected all CSS that I can find, but googling and MUI documentation is not provided me an answer and I see that I am not alone with this problem

table screenshot

Component

          <GridContainer>
                <StyledDataGridPro
                    headerHeight={40}
                    rowHeight={56}
                    disableSelectionOnClick
                    autoHeight
                    disableColumnMenu
                    disableChildrenSorting
                    disableColumnResize
                    disableColumnReorder
                    hideFooterRowCount
                    rows={rows}
                    columns={columns}
                />
            </GridContainer>

Container styles:

export const GridContainer = styled(Box)(({ theme }) => ({
    width: '535px',
    marginTop: '24px',
    '& .actions': {
        padding: '0 !important'
    },
    '& .MuiDataGrid-footerContainer': {
        display: 'none'
    }
}));

Grid styles:

export const StyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
    border: 'none',
    '& .MuiDataGrid-row': {
        cursor: 'pointer'
    },
    '& .MuiDataGrid-columnSeparator': {
        visibility: 'hidden'
    },
    '& .MuiDataGrid-columnHeaders, .MuiDataGrid-columnHeader': {
        backgroundColor: theme.palette.custom.cultured
    },
}));


Solution 1:[1]

AT LEAST!!! the problem is that gridPro is rendered in Drawer that is closed at the same time, so currently I have a 0px width of the parent that is not rendered currently, OMG so stupid mistake

So to fix it I made it conditionally rendered, so I passed in the 'isOpen' state of the whole Drawer - just that simple

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Igor S.