數據網格的父 DOM 元素具有空高度

Question

import React from 'react'
import { DataGrid } from '@mui/x-data-grid'
import Box from '@mui/material/Box'

export default function ManageAdmins() {

  const columns = [
    { field: 'no.', headerName: 'no.' },
    { field: 'id', headerName: 'id' },
    { field: 'avatar', headerName: 'Avatar' },
    { field: 'name', headerName: 'Name' },
    { field: 'active', headerName: 'active?' },
    { field: 'email', headerName: 'Login email' },
    { field: 'contactEmail', headerName: 'Contact email' },
    { field: 'actions', headerName: 'Actions' },
  ]

  return (
    <Box sx={{ height: '500px', width: '500px' }}>
      <DataGrid columns={columns} rows={[]} />
    </Box>
  )
}

我收到以下錯誤：

MUI：useResizeContainer - 數據網格的父 DOM 元素具有空高度。 請確保此元素具有固有高度。 網格顯示高度為 0 像素。

有什么問題？

Answer 1

你需要給它高度樣式

<div style={{height: '300px',width: '70%'}} >
  <DataGrid ......./>
</div>