I'm setting up a project using React, React Admin, Babel, TypeScript and Webpack. The editor I'm using is VSCode.
I'm trying to use the new Material UI styling solution and then specifically the Styled Components API.
I've TSLint configured so that's required to add a typedef to a variable declaration.
When I write the following code:
const StyledButton = styled(Button)({
backgroundColor: 'yellow',
height: 10,
width: 80,
});
TSLint throws the following error: expected variable-declaration: 'StyledButton' to have a typedef (typedef)tslint(1). Please note that the Button I'm passing to styled() is a component coming from Material UI:
import Button from '@material-ui/core/Button';
When I then hover over StyledButton I see the following:
So basically VSCode is telling me the type of StyledButton variable, which is React.ComponentType. So if I update my code to this:
const StyledButton: React.ComponentType = styled(Button)({
backgroundColor: 'yellow',
height: 10,
width: 80,
});
I get no errors whatsoever. Great!
But now my issue begins: when I change the Button to an actual HTML element button:
const StyledButton: React.ComponentType = styled('button')({
backgroundColor: 'yellow',
height: 10,
width: 80,
});
My editor throws the following error:
Type 'ComponentType<never>' is not assignable to type 'ComponentType<{}>'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}>'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}>' is not assignable to type 'never'
When I remove the typedef and hover over StyledButton again I see the following:
So VSCode is telling me that the type has changed to React.ComponentType<never>. Lets update my code to:
const StyledButton: React.ComponentType<never> = styled('button')({
backgroundColor: 'yellow',
height: 10,
width: 80,
});
And the errors go away, nice! Let's use the StyledButton:
<StyledButton>
I'm a button
</StyledButton>
This throws another error:
This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)
Am I doing something wrong or? How can I correctly type the StyledButton and not got errors when I actually use the component?
I also posted this issue on GitHub but it got closed unfortunately: https://github.com/mui-org/material-ui/issues/14898
If you need any more information please let me know and thanks in advance!

