Material UI styled components are thrown Typescript error JSX element type does not have any construct or call signatures.ts(2604)

Material UI styled components are thrown Typescript error JSX element type does not have any construct or call signatures.ts(2604)

I'm using the @mui/material/styles to create a styled component. The component is defined as:

const CloseButton = styled(Button)(() => ({
    backgroundColor: '#f5f5f5',
    height: '100%',
    width: '50px',
    minWidth: '50px',
    borderRadius: 0,
    borderWidth: 0,
    borderTopRightRadius: 'inherit',
    borderBottomRightRadius: 'inherit',
}));

and is used as follows:

<CloseButton onClick={dismissFunc}> Close</CloseButton>

Where the button is being used is getting the following error:

JSX element type 'CloseButton' does not have any construct or call signatures.ts(2604)

What is the correct way to use a styled component with Typescript?

Answer

I found a solution at the following site: https://blog.skorp.io/jsx-element-type-does-not-have-any-construct-or-call-signaturests2604

The solution is to type the styled component as a React.component.

Now the styled component looks like this:

const CloseButton:React.component = styled(Button)(() => ({
    backgroundColor: '#f5f5f5',
    height: '100%',
    width: '50px',
    minWidth: '50px',
    borderRadius: 0,
    borderWidth: 0,
    borderTopRightRadius: 'inherit',
    borderBottomRightRadius: 'inherit',
}));

Enjoyed this question?

Check out more content on our blog or follow us on social media.

Browse more questions