Question 291774 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Defining components from @mui/material and @mui/labs

I tried to use components from the external libraries @mui/material and @mui/labs without success. The following is my code:

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>
}

As I define components from these libraries I’m getting the following error:

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<...>>'

Any idea what could be the issue here?

I have searched online for this problem and couldn’t find anything related to my issue here. I have also tried to use various versions of the mentioned libraries with no success. This is a very simple code snippet and should work, so my guess this has something to do with the installed related packages.

Tags:

2

Answers


  1. 0

    The error you’re encountering seems to be related to the typing mismatch between the components you’re using and their expected types. Specifically, it’s mentioning issues with the Box component from @mui/material.

    The error message indicates that the Box component is receiving a type that is not compatible with what it expects, particularly in terms of the children property.

    One common reason for such errors could be related to mismatched versions of the libraries or potentially conflicting types from different versions.

    Here are a few steps you could take to resolve this issue:

    1. Check Versions: Ensure that you are using compatible versions of @mui/material and @mui/lab. Sometimes, using mismatched versions can lead to these type inference issues.

    2. TypeScript Definitions: Ensure that your TypeScript definitions are up-to-date and are compatible with the versions of the MUI (Material-UI) packages you’re using. Sometimes, TypeScript definitions might not align perfectly with the actual implementations.

    3. Library Imports: Make sure you’re importing the components correctly. For instance, check if you’re importing Box from @mui/material and TabContext, TabList, TabPanel from @mui/lab in the correct way.

    4. TypeScript Configuration: Ensure that your TypeScript configuration is set up properly. Sometimes, specific configurations might affect type inference.

    5. Community Forums: Consider checking the GitHub repositories or forums dedicated to @mui/material and @mui/lab for any reported issues or discussions related to the versions or similar typing problems.

    Lastly, if the issue persists, you might try simplifying the code and testing it in isolation. Sometimes, other parts of the codebase or additional dependencies can inadvertently cause these type inference issues.

    If none of these steps resolve the problem, reaching out to the community forums or raising an issue on the GitHub repository of Material-UI might provide more targeted assistance from developers familiar with the libraries.

    Login or Signup to reply.
  2. 0

    Try using this (confirmed working):

    Note: The function name matches yours MuiTabs … the filename is unspecified in the question; in this example, it isDemo.tsx here … ofc you can change it as needed:

    //./Demo.tsx
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function CustomTabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

export default function MuiTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </Box>
      <CustomTabPanel value={value} index={0}>
        Item One
      </CustomTabPanel>
      <CustomTabPanel value={value} index={1}>
        Item Two
      </CustomTabPanel>
      <CustomTabPanel value={value} index={2}>
        Item Three
      </CustomTabPanel>
    </Box>
  );
}

    And the index.tsx

    // ./index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';

ReactDOM.createRoot(document.querySelector("#root")!).render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <Demo />
    </StyledEngineProvider>
  </React.StrictMode>
);

    This is from the official MUI docs here and here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search