Hi guys I am encountering an issue with the styled-components css helper with Typescript. Suppose I create a styled component as such:

interface TestComponentProps {
    disabled?: boolean;
}

export const TestComponent = styled.div<TestComponentProps>`
    ${props => {
        if (props.disabled) {
          return css`
            border: 1px solid grey;
            border-radius: 4px;
            background: black;
            margin: 1rem 0;
          `;
        } else {
          return css`
            border: 1px solid blue;
            border-radius: 0;
            background: white;
          `;
        }
    }}
`;

And when extending the styles of the TestComponent

export const StyledComponent = styled(TestComponent)`
    margin-bottom: 4px;
`;

I get the error

const TestComponent: StyledComponent<"div", any, TestComponentProps, never>
Expression produces a union type that is too complex to represent. ts(2590)

Adding type any to TestComponent will resolve the error, however this means I will lose the prop typings for the component. Yet typing React.Component<TestComponentProps> returns missing attributes error.

Would like to seek some assistance on how I can type this properly to overcome this error.

typescript: 4.4.2
styled-components: 5.3.5
@types/styled-components: 5.1.24