innerRef in WithTheme broke compatibility to styled components

[Mario-Eis]

Since 1.4.1 there is an issue when using styled components together with the WithTheme interface.
innerRef on WithTheme broke property spreading to styled components
this seems to be related to #12216

e.g. after 1.4.1 this will produce a type error:

const StyledTableRow = styled(TableRow)`...`;
private rowRenderer = (props: TableRowProps & WithTheme) => <StyledTableRow {...props} selected={this.props.scrollToRow === props.index}/>;

TS2322: Type '{ selected: boolean; className: string; columns: any[]; index: number; isScrolling: boolean; onRo...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<Pick<TableRowProp...'.
  Type '{ selected: boolean; className: string; columns: any[]; index: number; isScrolling: boolean; onRo...' is not assignable to type 'Readonly<ThemedOuterStyledProps<Pick<TableRowProps & { key?: string; selected?: boolean; }, "styl...'.
    Types of property 'innerRef' are incompatible.
      Type 'Ref<any>' is not assignable to type '(string & RefObject<HTMLElement | SVGElement | Component<{}, {}, any>>) | (string & ((instance: a...'.
        Type 'string' is not assignable to type '(string & RefObject<HTMLElement | SVGElement | Component<{}, {}, any>>) | (string & ((instance: a...'.

sytled components seems to define the innerRef prop for its own purposes with a different type.

Writing the following may (?) work, but its a wokaround and dosn't use the appropriate type interface.

private rowRenderer = (props: TableRowProps & {theme: Theme}) => <StyledTableRow {...props} selected={this.props.scrollToRow === props.index}/>;

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

WithTheme should be compatible to styled components.

Current Behavior

WithTheme is not compatible to styled components.

Steps to Reproduce

see above

Your Environment

Tech	Version
Material-UI	v1.4.1

Update: Maybe, if the type names collide, this is not entirely a typescript issue only. Feels like the innerRef prop could have multiple usages here and get overwritten (?)

[oliviertassinari]

@Mario-Eis Could you provide a full reproduction? It would help a lot.

[Mario-Eis]

I'm sorry, I've not been able to recreate the issue in a sandbox. The type checking in the sandboxes did not work like the local checks. I solved the issue in my project by upgrading typescript and replacing WithTheme in the styled components body with Partial<WithTheme>. So I could remove the interface from the components props and avoid the conflict between materials WithTheme and the styled components innerRef. I don't know the exact implications yet, but it seems to work so far...

As I understood, innerRef is used by styled components to pass down component refs. So there is a conflict between the innerRef in WithTheme and styled-components. I also figured out, that they are going to remove innerRef in 4.0 anyway: styled-components/styled-components#1560 (comment)

[eps1lon]

This should be fixed by #14333 which was released in 3.9.2