MUI DataGridPro useResizeContainer - 网格的父级具有空宽度

Question

我恳求你帮助我，因为我已经寻找答案3天了，但我无法解决这个问题。

问题： MUI：useResizeContainer - 网格的父级具有空宽度。 您需要确保容器具有固有宽度。 网格显示宽度为 0px。

描述 这是我的表格的屏幕截图，它放置在 MUI 侧抽屉中，当我检查了我能找到的所有 CSS 时，我们如何看到没有 0px 宽度或与之相关的内容，但没有向我提供谷歌搜索和 MUI 文档一个答案，我发现我并不孤单遇到这个问题

组件

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

容器样式：

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

网格样式：

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

Answer 1

至少！！！ 问题是gridPro是在同时关闭的Drawer中渲染的，所以目前我有一个0px宽度的父级当前未渲染， 天哪，这么愚蠢的错误

为了解决这个问题，我对其进行了条件渲染，因此我传入了整个抽屉的“isOpen”状态 - 就这么简单

Answer 2

在新窗口和应用程序窗口之间切换数据网格的渲染时，我也遇到了同样的问题。 在安装时使用状态设置为 true 并仅在这似乎解决了问题之后才显示数据网格。

这是一个伪代码：

const [ready, isReady] = useState(false);
useEffect(() => {
  isReady(true);
}, []);

return (
  <Parent>
    {ready ? <DataGrid /> : <div>Loading...</div>}
  </Parent>
))