Typescript error with nested styled, themed components

Version

1.0.5

Reproduction

Not sure how to replicate this in webpackbin

Steps to reproduce

Create a theme file, as per the typescript guidance here

import * as styledComponents from 'styled-components';
import { ThemedStyledComponentsModule } from 'styled-components';

interface MyTheme {
  backgroundColor: string;
}

const defaultTheme: MyTheme = {
  backgroundColor: blue;
};

const {
  default: styled,
  css,
  injectGlobal,
  keyframes,
  ThemeProvider,
} = styledComponents as ThemedStyledComponentsModule<MyTheme>;

export default styled;
export { css, injectGlobal, keyframes, ThemeProvider, MyTheme, defaultTheme };

Create two styled components.

• The inner component wraps an input element.
• The outer component wraps the inner component.
• Expose the input elements API to the outer component using the {...others} = props pattern.

import * as React from 'react';
import styled, { defaultTheme } from './theme';

// Inner Component
interface IInnerComponentProps extends React.HTMLProps<HTMLInputElement> {
  foo?: string;
}

const InnerComponent: React.StatelessComponent<IInnerComponentProps> = props => {
  const {foo, ...others} = props;
  return <input type="text" {...others}/>;
};

const InnerStyled = styled(InnerComponent)`
  background: red;
`;

InnerStyled.defaultProps = defaultTheme;

// Outer component
interface IMyComponentProps extends React.HTMLProps<HTMLElement> {
  bar?: string;
}

const MyComponent: React.StatelessComponent<IMyComponentProps> = props => {
  const {bar, ...others} = props;
  return <div><InnerStyled type="text" {...others}/></div>;
};

const MyComponentStyled = styled(MyComponent)`
  color: green;
`;

MyComponentStyled.defaultProps = {
  theme: defaultTheme,
};

Expected Behavior

the line return <div><InnerStyled type="text" {...others}/></div>; should not generate a typescript error.

Actual Behavior

The following typescript error is generated

Type '{ value: string; ghostValue?: string; theme?: any; defaultChecked?: boolean; defaultValue?: strin...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<IGhostedTextInput...'.
  Type '{ value: string; ghostValue?: string; theme?: any; defaultChecked?: boolean; defaultValue?: strin...' is not assignable to type 'IntrinsicClassAttributes<Component<ThemedOuterStyledProps<IGhostedTextInputProps, IGhostedTextInp...'.
    Types of property 'ref' are incompatible.
      Type 'Ref<HTMLInputElement>' is not assignable to type 'Ref<Component<ThemedOuterStyledProps<IGhostedTextInputProps, IGhostedTextInputTheme>, ComponentSt...'.
        Type '(instance: HTMLInputElement) => any' is not assignable to type 'Ref<Component<ThemedOuterStyledProps<IGhostedTextInputProps, IGhostedTextInputTheme>, ComponentSt...'.
          Type '(instance: HTMLInputElement) => any' is not assignable to type '(instance: Component<ThemedOuterStyledProps<IGhostedTextInputProps, IGhostedTextInputTheme>, Comp...'.
            Types of parameters 'instance' and 'instance' are incompatible.
              Type 'Component<ThemedOuterStyledProps<IGhostedTextInputProps, IGhostedTextInputTheme>, ComponentState>' is not assignable to type 'HTMLInputElement'.
                Property 'accept' is missing in type 'Component<ThemedOuterStyledProps<IGhostedTextInputProps, IGhostedTextInputTheme>, ComponentState>'. 

[mxstbr]

Closing since the original issue was answered by @Igorbek!

[kitten]

It’s not a bug 😃 you’re using the default HTMLProps and trying to pass a ref, but unfortunately the ref is now pointing to an instance of the styled component and not the underlying element ref.

You’ll either want to add a new type for ref, or more likely use innerRef instead

cc @styled-components/typers