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