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

I wanted to make a styled button with Material UI 5.6.0, but encountered a new error that I couldn't find a solution to on Google.

My custom styled components button:
```
import { Button, styled } from '@mui/material';

const ColorButton  = styled(Button) (({ theme }) => ({
        color: theme.palette.getContrastText('#fff'),
        backgroundColor: '#00535a',
        '&:hover': {
          backgroundColor: '#00535a',
        },
      }));
```

When compiling it gave the following error:
**JSX element type 'ColorButton' does not have any construct or call signatures.ts(2604)**

I tried importing Button from Material UI like this:

```
import Button from '@mui/material/Button';
``` 

I tried importing styled components a few different ways:
```
import { styled } from '@mui/material/styles';
import styled from 'styled-components';
```

tried adding resolution to package.json:
```{
   "dependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  },
 }
``` 

added path to tsconfig.json:
```{
   "compilerOptions": {
    "paths": {
     "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
    }
   },
 }
``` 

But the solution was way simpler, just type the new styled component as a React.Component

```
const ColorButton: React.Component  = styled(Button) (({ theme }) => ({
        color: theme.palette.getContrastText('#fff'),
        backgroundColor: '#00535a',
        '&:hover': {
          backgroundColor: '#00535a',
        },
      }));
```