menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team

Typescript support for Refs

October 17, 2018 at 6:28am

Typescript support for Refs

October 17, 2018 at 6:28am
Hey Guys! Congrats on v4!
Been migrating the codebase to v4 and refractoring the use of innerRef to just ref
But there is an incomprehensible (may be because I'm new) type error.
container = React.createRef<HTMLDivElement>();
<Container ref={this.container}>
<p>Text</p>
</Container>
What should I be giving out the type of component as?

August 1, 2019 at 6:46pm
Hi , did you ever figure this one out? Upgrading to v4 today and my refs are all breaking.
Type 'RefObject<HTMLDivElement>' is not assignable to type 'string | (string & ((instance: HTMLDivElement | null) => any)) | (((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null) => any) & string) | (((instance: Component<...> | null) => any) & ((instance: HTMLDivElement | null)...'.
Type 'RefObject<HTMLDivElement>' is not assignable to type '((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null) => any) & ((instance: HTMLDivElement | null) => any)'.
Type 'RefObject<HTMLDivElement>' is not assignable to type '(instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null) => any'.
Type 'RefObject<HTMLDivElement>' provides no match for the signature '(instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null): any'.ts(2322)
index.d.ts(89, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState>> & Readonly<...> & Readonly<...>'
  • reply
  • like
For now I'm just typing all refs as any
  • reply
  • like
Also having to do styled(Dropdown as any) instead of styled(Dropdown)
  • reply
  • like

August 2, 2019 at 11:53am
Haven't found anything for this yet
like-fill
1
  • reply
  • like

August 2, 2019 at 8:30pm
Thanks, I'll let you know if I can find a solution.
  • reply
  • like