使用@mui/material与@mui/labs组件遇TypeScript类型错误，求助排查

代码示例 #

import { Box, Tab } from '@mui/material'
import { TabContext, TabList, TabPanel } from '@mui/lab'
import React, { useState } from 'react'


export const MuiTabs = () => {
    const [value, setValue] = useState('1')
    
    const handleChanged: Function = (event: React.SyntheticEvent, newValue: string) => {
        setValue(newValue)
    }
    return <Box>
        <TabContext value={value}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider'}}>
                <TabList aria-label='Example Tabs' onChange={handleChanged} textColor='secondary' indicatorColor='secondary' centered>
                    <Tab label='Tab One' value='1' />
                    <Tab label='Tab Two' value='2' />
                    <Tab label='Tab Three' value='3' />
                </TabList>
            </Box>
            
            <TabPanel value='1'>
                Panel one
            </TabPanel>

            <TabPanel value='2'>
                Panel two
            </TabPanel>

            <TabPanel value='3'>
                Panel three
            </TabPanel>

        </TabContext>
    </Box>
}

遇到的错误 #

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & BoxOwnProps<Theme> & Omit<any, keyof BoxOwnProps<Theme>>): Element | null', gave the following error.
    Type 'Element' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div", Theme>>): Element | null', gave the following error.
    Type 'Element' is not assignable to type 'ReactNode'.ts(2769)
Box.d.ts(186, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & BoxOwnProps<Theme> & Omit<any, keyof BoxOwnProps<Theme>>'
Box.d.ts(186, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & BoxOwnProps<Theme> & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, keyof BoxOwnProps<...>>'

问题原因及解决方案 #

1. 组件导入路径错误（核心原因） #

MUI v5.3及以上版本中，TabContext、TabList、TabPanel已从@mui/lab迁移至@mui/material包，继续从旧路径导入会导致类型定义不兼容，触发类型错误。

修复方式：修改导入语句，统一从@mui/material导入所有Tabs相关组件：

import { Box, Tab, TabContext, TabList, TabPanel } from '@mui/material'

2. TypeScript类型定义优化 #

handleChanged使用Function作为类型过于宽泛，建议明确类型定义：

const handleChanged: (event: React.SyntheticEvent, newValue: string) => void = (event, newValue) => {
    setValue(newValue)
}

3. 依赖版本不兼容 #

若上述修改后仍报错，检查以下依赖是否匹配：

• 确保@mui/material及相关MUI包版本一致
• 确保@types/react、@types/react-dom版本与React主版本兼容（如React 18对应@types/react 18.x）
• 避免同时安装旧版@material-ui/core和新版@mui/material，防止类型冲突

修复后完整代码 #

import { Box, Tab, TabContext, TabList, TabPanel } from '@mui/material'
import React, { useState } from 'react'

export const MuiTabs = () => {
    const [value, setValue] = useState('1')
    
    const handleChanged = (event: React.SyntheticEvent, newValue: string) => {
        setValue(newValue)
    }
    
    return (
        <Box>
            <TabContext value={value}>
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                    <TabList
                        aria-label='Example Tabs'
                        onChange={handleChanged}
                        textColor='secondary'
                        indicatorColor='secondary'
                        centered
                    >
                        <Tab label='Tab One' value='1' />
                        <Tab label='Tab Two' value='2' />
                        <Tab label='Tab Three' value='3' />
                    </TabList>
                </Box>
                
                <TabPanel value='1'>Panel one</TabPanel>
                <TabPanel value='2'>Panel two</TabPanel>
                <TabPanel value='3'>Panel three</TabPanel>
            </TabContext>
        </Box>
    )
}

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