Issue 1:
I tried using the @types/styled-components package and had problems.

How to correctly define a reference for styled-components?

I wrote the following test code:

import React, {Component, RefObject, ReactNode} from 'react';
import styled, {StyledComponentClass} from 'styled-components';

type TModalShadowContainer = StyledComponentClass<{}, any>;

const ModalShadowContainer: TModalShadowContainer = styled.div`
background-color: black;
`;

export default class Modal extends Component {

private readonly modalRef: RefObject<TModalShadowContainer>;

constructor(props: {}) {
super(props);
this.modalRef = React.createRef<TModalShadowContainer>();
}

public render(): ReactNode {
return (
<ModalShadowContainer ref={this.modalRef}>
{this.props.children}
</ModalShadowContainer>
);
}

}

The error appears on the line:

<ModalShadowContainer ref={this.modalRef}>

Error text:

Type 'RefObject<StyledComponentClass<{}, {}, {}>>' is not assignable to type 'string | ((instance: Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any> | null) => any) | RefObject<Component<{ ...; }, any, any>> | undefined'.
Type 'RefObject<StyledComponentClass<{}, {}, {}>>' is not assignable to type 'RefObject<Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any>>'.
Type 'StyledComponentClass<{}, {}, {}>' is not assignable to type 'Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any>'.
Property 'setState' is missing in type 'StyledComponentClass<{}, {}, {}>'.

How to describe (define) a ref in TypeScript lang?

Since everyone is trying to convince me not to do it, I have to refer to the original sources, namely:

https://www.styled-components.com/docs/advanced#refs

https://reactjs.org/docs/refs-and-the-dom.html#creating-refs

Issue 2:
I tried using the @types/styled-components package and had problems.

I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript

Mention the authors (see Definitions by: in index.d.ts) so they can respond.

Authors: @Igorbek @Igmat

Here is a simple repro. I can use forwarded ref on regular input, but not with styled one, it gives weird Typescript error, I am not sure what it means really.

https://codesandbox.io/s/o5ompq26j6

import * as React from 'react'
import styled from 'styled-components'

const StyledInput = styled.input`
background-color: yellow;
`

export const WithInput = React.forwardRef<HTMLInputElement>((props, ref) => (
<React.Fragment>
<input ref={ref} />
<StyledInput ref={ref} />
</React.Fragment>
))

Type 'string | ((instance: HTMLInputElement | null) => any) | RefObject<HTMLInputElement> | undefined' is not assignable to type 'string | (string & ((instance: HTMLInputElement | null) => any)) | (string & RefObject<HTMLInputElement>) | (((instance: Component<ThemedOuterStyledProps<ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & { ...; }, any>, any, any> | null) => any) & string) | ... 5 more ... | undefined'.
Type '(instance: HTMLInputElement | null) => any' is not assignable to type 'string | (string & ((instance: HTMLInputElement | null) => any)) | (string & RefObject<HTMLInputElement>) | (((instance: Component<ThemedOuterStyledProps<ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & { ...; }, any>, any, any> | null) => any) & string) | ... 5 more ... | undefined'.
Type '(instance: HTMLInputElement | null) => any' is not assignable to type 'RefObject<Component<ThemedOuterStyledProps<ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & { invalid?: boolean | undefined; }, any>, any, any>> & RefObject<...>'.
Type '(instance: HTMLInputElement | null) => any' is not assignable to type 'RefObject<Component<ThemedOuterStyledProps<ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & { invalid?: boolean | undefined; }, any>, any, any>>'.
Property 'current' is missing in type '(instance: HTMLInputElement | null) => any'.