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)
typescript
Ethan Jackson

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', }));

Related Articles