material ui 中 React 中的这个长错误是什么？

Question

编译有问题：X

./src/Pages/Crypto_transactions.js 中的错误 184:35-43

export 'default' (imported as 'DataGrid') was not found in '@material-ui/data-grid' (possible exports: DATA_GRID_PROPTYPES, DEFAULT_GRID_COL_TYPE_KEY, DEFAULT_GRID_OPTIONS, DEFAULT_GRID_PROPS_FROM_OPTIONS, DEFAULT_GRID_SLOTS_COMPONENTS, DataGrid, GRID_BOOLEAN_COLUMN_TYPE, GRID_CELL_CSS_CLASS, GRID_CELL_CSS_CLASS_SUFFIX, GRID_COLUMN_HEADER_CSS_CLASS, GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX , GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS, GRID_COLUMN_HEADER_DROP_ZONE_CSS_CLASS, GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS, GRID_COLUMN_HEADER_TITLE_CSS_CLASS, GRID_CSS_CLASS_PREFIX, GRID_DATETIME_COLUMN_TYPE, GRID_DATETIME_COL_DEF, GRID_DATE_COLUMN_TYPE, GRID_DATE_COL_DEF, GRID_DEFAULT_LOCALE_TEXT, GRID_EXPERIMENTAL_ENABLED, GRID_NUMBER_COLUMN_TYPE, GRID_NUMERIC_COL_DEF, GRID_ROOT_CSS_CLASS_SUFFIX, GRID_ROW_CSS_CLASS, GRID_ROW_CSS_CLASS_SUFFIX, GRID_STRING_COLUMN_TYPE, GRID_STRING_COL_DEF, GridAddIcon, GridApiContext, GridArrowDownwardIcon, GridArrowUpwardIcon, GridAutoSizer, GridBody, GridCell , 克idCellCheckboxForwardRef, GridCellCheckboxRenderer, GridCheckCircleIcon, GridCheckIcon, GridCloseIcon, GridColumnHeaderItem, GridColumnHeaderMenu, GridColumnHeaderSeparator, GridColumnHeaderSortIcon, GridColumnHeaderTitle, GridColumnHeadersItemCollection, GridColumnIcon, GridColumnMenu, GridColumnMenuContainer, GridColumnsContainer, GridColumnsHeader, GridColumnsMenuItem, GridColumnsPanel, GridDataContainer, GridDensityTypes, GridDragIcon, GridEditInputCell, GridEditSingleSelectCell, GridEmptyCell, GridErrorHandler, GridEvents, GridFeatureModeConstant, GridFilterAltIcon, GridFilterForm, GridFilterInputValue, GridFilterListIcon, GridFilterMenuItem, GridFilterPanel, GridFooter, GridFooterContainer, GridFooterPlaceholder, GridHeader, GridHeaderCheckbox, GridHeaderPlaceholder, GridLinkOperator, GridLoadIcon, GridLoadingOverlay, GridMenu, GridMenuIcon, GridNoRowsOverlay, GridOverlay, GridOverlays, GridPagination, GridPanel, GridPanelContent, GridPanelFooter、GridPanelHeader、GridPanelWrappe r, GridPreferencePanelsValue, GridPreferencesPanel, GridRenderingZone, GridRoot, GridRow, GridRowCells, GridRowCount, GridSaveAltIcon, GridScrollArea, GridSearchIcon, GridSelectedRowCount, GridSeparatorIcon, GridStickyContainer, GridTableRowsIcon, GridToolbar, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExport, GridToolbarFilterButton, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridViewport, GridWindow, HideGridColMenuItem, MAX_PAGE_SIZE, SUBMIT_FILTER_STROKE_TIME, Signature, SortGridMenuItems, activeGridFilterItemsSelector, allGridColumnsFieldsSelector, allGridColumnsSelector, arSD, bgBG, checkGridRowIdIsValid, convertGridRowsPropToState, csCZ, deDE, elGR, enUS, esES, filterGridColumnLookupSelector, filterGridItemsCounterSelector, filterGridStateSelector, filterableGridColumnsIdsSelector, filterableGridColumnsSelector, frFR, getGridColDef, getGridDateOperators、getGridDefaultColumnTypes、getGridNumericColumnOperator s, getGridStringOperators, getInitialGridColumnReorderState, getInitialGridColumnResizeState, getInitialGridColumnsState, getInitialGridFilterState, getInitialGridRenderingState, getInitialGridRowState, getInitialGridSortingState, getInitialGridState, getInitialVisibleGridRowsState, gridCheckboxSelectionColDef, gridColumnLookupSelector, gridColumnMenuStateSelector, gridColumnReorderDragColSelector, gridColumnReorderSelector, gridColumnResizeSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnsTotalWidthSelector, gridDateFormatter, gridDateTimeFormatter, gridEditRowsStateSelector, gridFocusCellSelector, gridFocusColumnHeaderSelector, gridFocusStateSelector、gridPaginatedVisibleSortedGridRowIdsSelector、gridPaginationSelector、gridPanelClasses、gridPreferencePanelStateSelector、gridResizingColumnFieldSelector、gridRowCountSelector、gridRowsLookupSelector、gridRowsStateSelector、gridScrollbarStateSelector、gridSelectionStateSelector、gridSortColumnLookupSelector、gridSortMod elSelector, gridTabIndexCellSelector, gridTabIndexColumnHeaderSelector, gridTabIndexStateSelector, gridViewportSizeStateSelector, itIT, jaJP, nlNL, plPL, plPLGrid, ptBR, renderEditInputCell, renderEditSingleSelectCell, ruRU, ruRUGrid, selectedGridRowsCountSelector, selectedGridRowsSelector, selectedIdsLookupSelector, skSK, skSKGrid, sortedGridRowIdsSelector, sortedGridRowsSelector, trTR, ukUA, ukUAGrid, unorderedGridRowIdsSelector, unorderedGridRowModelsSelector, useApi, useDataGridComponent, useGridApi, useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridApiRef, useGridColumnMenu, useGridColumnReorder, useGridColumnResize, useGridColumns, useGridComponents, useGridContainerProps, useGridControlState, useGridEditRows, useGridFilter, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPage, useGridPageSize, useGridParamsApi, useGridPreferencesPanel, useGridReducer、useGridRows、useGridScrollFn、useGridSelection、useGridSelector、useGridSlotComponentPro ps, useGridSorting, useGridState, useGridVirtualRows, useLogger, useLoggerFactory, useNativeEventListener, visibleGridColumnsLengthSelector, visibleGridColumnsSelector, visibleGridRowCountSelector, visibleGridRowsStateSelector, visibleSortedGridRowIdsSelector, visibleSortedGridRowsAsArraySelector, visibleSortedGridRowsSelector)

Answer 1

您使用了 import DataGrid from '@material-ui/data-grid'，它没有 default 导出。

你可能想要

import { DataGrid } from '@material-ui/data-grid'

Answer 2

使用 import {DataGrid} from "@mui/material"; 而不是 import DataGrid from "@mui/material";。它会解决问题。

当它要导入命名组件时，它必须包含在花括号内。 {DataGrid} 而不是 DataGrid。

带大括号的组件指定 React 包的特定元素。如果没有大括号，它将导入默认的反应包。