<p dir="auto">I tried using the <code class="notranslate">@types/styled-components</code> package and had problems.</p>
<p dir="auto">How to correctly define a reference for styled-components?</p>
<p dir="auto">I wrote the following test code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, {Component, RefObject, ReactNode} from 'react';
import styled, {StyledComponentClass} from 'styled-components';

type TModalShadowContainer = StyledComponentClass&lt;{}, any&gt;;

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

export default class Modal extends Component {

	private readonly modalRef: RefObject&lt;TModalShadowContainer&gt;;

	constructor(props: {}) {
		super(props);
		this.modalRef = React.createRef&lt;TModalShadowContainer&gt;();
	}

	public render(): ReactNode {
		return (
			&lt;ModalShadowContainer ref={this.modalRef}&gt;
				{this.props.children}
			&lt;/ModalShadowContainer&gt;
		);
	}

}"><pre class="notranslate"><code class="notranslate">import React, {Component, RefObject, ReactNode} from 'react';
import styled, {StyledComponentClass} from 'styled-components';

type TModalShadowContainer = StyledComponentClass&lt;{}, any&gt;;

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

export default class Modal extends Component {

	private readonly modalRef: RefObject&lt;TModalShadowContainer&gt;;

	constructor(props: {}) {
		super(props);
		this.modalRef = React.createRef&lt;TModalShadowContainer&gt;();
	}

	public render(): ReactNode {
		return (
			&lt;ModalShadowContainer ref={this.modalRef}&gt;
				{this.props.children}
			&lt;/ModalShadowContainer&gt;
		);
	}

}
</code></pre></div>
<p dir="auto">The error appears on the line:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ModalShadowContainer ref={this.modalRef}&gt;"><pre class="notranslate"><code class="notranslate">&lt;ModalShadowContainer ref={this.modalRef}&gt;
</code></pre></div>
<p dir="auto">Error text:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type 'RefObject&lt;StyledComponentClass&lt;{}, {}, {}&gt;&gt;' is not assignable to type 'string | ((instance: Component&lt;{ as?: string | ComponentClass&lt;any, any&gt; | StatelessComponent&lt;any&gt; | undefined; theme?: {} | undefined; }, any, any&gt; | null) =&gt; any) | RefObject&lt;Component&lt;{ ...; }, any, any&gt;&gt; | undefined'.
  Type 'RefObject&lt;StyledComponentClass&lt;{}, {}, {}&gt;&gt;' is not assignable to type 'RefObject&lt;Component&lt;{ as?: string | ComponentClass&lt;any, any&gt; | StatelessComponent&lt;any&gt; | undefined; theme?: {} | undefined; }, any, any&gt;&gt;'.
    Type 'StyledComponentClass&lt;{}, {}, {}&gt;' is not assignable to type 'Component&lt;{ as?: string | ComponentClass&lt;any, any&gt; | StatelessComponent&lt;any&gt; | undefined; theme?: {} | undefined; }, any, any&gt;'.
      Property 'setState' is missing in type 'StyledComponentClass&lt;{}, {}, {}&gt;'."><pre class="notranslate"><code class="notranslate">Type 'RefObject&lt;StyledComponentClass&lt;{}, {}, {}&gt;&gt;' is not assignable to type 'string | ((instance: Component&lt;{ as?: string | ComponentClass&lt;any, any&gt; | StatelessComponent&lt;any&gt; | undefined; theme?: {} | undefined; }, any, any&gt; | null) =&gt; any) | RefObject&lt;Component&lt;{ ...; }, any, any&gt;&gt; | undefined'.
  Type 'RefObject&lt;StyledComponentClass&lt;{}, {}, {}&gt;&gt;' is not assignable to type 'RefObject&lt;Component&lt;{ as?: string | ComponentClass&lt;any, any&gt; | StatelessComponent&lt;any&gt; | undefined; theme?: {} | undefined; }, any, any&gt;&gt;'.
    Type 'StyledComponentClass&lt;{}, {}, {}&gt;' is not assignable to type 'Component&lt;{ as?: string | ComponentClass&lt;any, any&gt; | StatelessComponent&lt;any&gt; | undefined; theme?: {} | undefined; }, any, any&gt;'.
      Property 'setState' is missing in type 'StyledComponentClass&lt;{}, {}, {}&gt;'.
</code></pre></div>
<p dir="auto">How to describe (define) a ref in TypeScript lang?</p>
<p dir="auto">Since everyone is trying to convince me not to do it, I have to refer to the original sources, namely:</p>
<p dir="auto"><a href="https://www.styled-components.com/docs/advanced#refs" rel="nofollow">https://www.styled-components.com/docs/advanced#refs</a><br>
<a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" rel="nofollow">https://reactjs.org/docs/refs-and-the-dom.html#creating-refs</a></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/styled-components</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igorbek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igorbek">@Igorbek</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igmat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igmat">@Igmat</a></li>
</ul>
</li>
</ul>
<hr>
<p dir="auto">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.</p>
<p dir="auto"><a href="https://codesandbox.io/s/o5ompq26j6" rel="nofollow">https://codesandbox.io/s/o5ompq26j6</a></p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react'
import styled from 'styled-components'

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

export const WithInput = React.forwardRef&lt;HTMLInputElement&gt;((props, ref) =&gt; (
  &lt;React.Fragment&gt;
    &lt;input ref={ref} /&gt;
    &lt;StyledInput ref={ref} /&gt;
  &lt;/React.Fragment&gt;
))"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-s1">styled</span> <span class="pl-k">from</span> <span class="pl-s">'styled-components'</span>

<span class="pl-k">const</span> <span class="pl-smi">StyledInput</span> <span class="pl-c1">=</span> <span class="pl-s1">styled</span><span class="pl-kos">.</span><span class="pl-en">input</span><span class="pl-s">`</span>
<span class="pl-s">  background-color: yellow;</span>
<span class="pl-s">`</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">WithInput</span> <span class="pl-c1">=</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">forwardRef</span><span class="pl-kos">&lt;</span><span class="pl-smi">HTMLInputElement</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">ref</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">Fragment</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">ref</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-smi">StyledInput</span> <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">ref</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">Fragment</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">)</span></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type 'string | ((instance: HTMLInputElement | null) =&gt; any) | RefObject&lt;HTMLInputElement&gt; | undefined' is not assignable to type 'string | (string &amp; ((instance: HTMLInputElement | null) =&gt; any)) | (string &amp; RefObject&lt;HTMLInputElement&gt;) | (((instance: Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { ...; }, any&gt;, any, any&gt; | null) =&gt; any) &amp; string) | ... 5 more ... | undefined'.
  Type '(instance: HTMLInputElement | null) =&gt; any' is not assignable to type 'string | (string &amp; ((instance: HTMLInputElement | null) =&gt; any)) | (string &amp; RefObject&lt;HTMLInputElement&gt;) | (((instance: Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { ...; }, any&gt;, any, any&gt; | null) =&gt; any) &amp; string) | ... 5 more ... | undefined'.
    Type '(instance: HTMLInputElement | null) =&gt; any' is not assignable to type 'RefObject&lt;Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { invalid?: boolean | undefined; }, any&gt;, any, any&gt;&gt; &amp; RefObject&lt;...&gt;'.
      Type '(instance: HTMLInputElement | null) =&gt; any' is not assignable to type 'RefObject&lt;Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { invalid?: boolean | undefined; }, any&gt;, any, any&gt;&gt;'.
        Property 'current' is missing in type '(instance: HTMLInputElement | null) =&gt; any'."><pre class="notranslate"><code class="notranslate">Type 'string | ((instance: HTMLInputElement | null) =&gt; any) | RefObject&lt;HTMLInputElement&gt; | undefined' is not assignable to type 'string | (string &amp; ((instance: HTMLInputElement | null) =&gt; any)) | (string &amp; RefObject&lt;HTMLInputElement&gt;) | (((instance: Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { ...; }, any&gt;, any, any&gt; | null) =&gt; any) &amp; string) | ... 5 more ... | undefined'.
  Type '(instance: HTMLInputElement | null) =&gt; any' is not assignable to type 'string | (string &amp; ((instance: HTMLInputElement | null) =&gt; any)) | (string &amp; RefObject&lt;HTMLInputElement&gt;) | (((instance: Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { ...; }, any&gt;, any, any&gt; | null) =&gt; any) &amp; string) | ... 5 more ... | undefined'.
    Type '(instance: HTMLInputElement | null) =&gt; any' is not assignable to type 'RefObject&lt;Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { invalid?: boolean | undefined; }, any&gt;, any, any&gt;&gt; &amp; RefObject&lt;...&gt;'.
      Type '(instance: HTMLInputElement | null) =&gt; any' is not assignable to type 'RefObject&lt;Component&lt;ThemedOuterStyledProps&lt;ClassAttributes&lt;HTMLInputElement&gt; &amp; InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; { invalid?: boolean | undefined; }, any&gt;, any, any&gt;&gt;'.
        Property 'current' is missing in type '(instance: HTMLInputElement | null) =&gt; any'.
</code></pre></div>