Material UI styled components are thrown Typescript error JSX element type does not have any construct or call signatures.ts(2604)
typescript
Ethan JacksonI'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',
}));
