I am struggling to understand how to use the withComponent() method of a StyledComponent in a Typescript setting. I have a basic styled component that I want to apply to a React component. However, the Typescript compiler is flagging an issue with props not matching.
What is the correct way to utilize the withComponent() method to create a styled component that also includes props from my React component?
import React from 'react';
import styled from 'styled-components';
const RedBackground = styled.div`
background-color: red;
`;
interface MenuContainerProps {
focus?: boolean;
}
class MenuContainer extends React.Component<MenuContainerProps> {
static defaultProps = {
focus: true,
};
render() {
return (
<div>MenuContainer</div>
);
}
}
const RedMenuContainer = RedBackground.withComponent(MenuContainer);
// error here ^^^^^^^^^^^^^
/*
Usage of RedMenuContainer. It should have a red `background-color` and a `focus` prop.
<RedMenuContainer focus={true}>
... children ...
</RedMenuContainer>
*/
The error message:
[ts]
Argument of type 'typeof MenuContainer' is not assignable to parameter of type 'ComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'.
Types of property 'defaultProps' are incompatible.
Type '{ focus: boolean; }' has no properties in common with type 'Partial<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'.