使用MUI Material创建Table组件时遇类型错误求助

问题代码 #

import React from 'react';
import Table from '@mui/material/Table';
const StyledTable = () => {
    return(
        <Table> </Table>
    );
}

export default StyledTable;

报错信息 #

• 导入行提示：'Table' is declared but its value is never read
• JSX中组件提示：'Table' refers to a value, but is being used as a type here. Did you mean 'typeof Table'

项目依赖 #

"dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fontsource/roboto": "^5.0.13",
    "@mui/material": "^5.15.18",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
}

解决方案 #

问题根源是错误的导入方式：@mui/material/Table的默认导出并非组件本身，而是组件的类型定义，导致TypeScript无法正确识别JSX中使用的是组件实例。

修改为命名导入即可解决两个错误：

import React from 'react';
// 使用命名导入获取Table组件
import { Table } from '@mui/material/Table';

const StyledTable = () => {
    return(
        <Table> </Table>
    );
}

export default StyledTable;

错误原因解释 #

1. 'Table' is declared but its value is never read：默认导入的Table是类型，TypeScript认为它未被当作值（组件实例）使用，因此提示未读取。
2. 'Table' refers to a value, but is being used as a type here：TypeScript将默认导入的类型误认为是值，而JSX中需要的是组件实例（值），因此类型不匹配报错。

内容的提问来源于stack exchange，提问作者Marko Taht