[styles] Allow ref on withTheme components in TS

[ianschmitz]

• I have followed (at least) the PR section of the contributing guide.

withTheme now forwards refs, but the typing for the ref prop is missing in the declaration file.

[mui-pr-bot]

No bundle size changes comparing 5d564f9...f8e0f19

Generated by 🚫 dangerJS against f8e0f19

[eps1lon]

I just realized that this is probably the wrong place. The WithTheme interface should be used for props of components decorated with withTheme.

This would now imply that you have access inside your component to props.ref. However, ref (like key) will be omitted.

interface Props extends WithTheme {}

function Component(props: Props) {
  const {ref} = props; // whoops, this can never happen
}

export default withTheme(Component);

Could you add a usage example that would be allowed with this change (i.e. a test) to https://github.com/mui-org/material-ui/blob/2bcc874cf07b81202968f769cb9c2398c7c11311/packages/material-ui-styles/test/styles.spec.tsx#L70?

[oliviertassinari]

@ianschmitz Did you had the chance to look at the problem?

[ianschmitz]

Oh shoot sorry I lost track of this. I'll take a look today!

[ianschmitz]

Alright I've updated it. I think it's what you were after. I've also updated material-ui-styles/src/withTheme/withTheme.d.ts to match.

Not super happy with the typings in material-ui-styles. Let me know if you're okay with it.

[ianschmitz]

Also a question. I noticed innerRef is on WithTheme in material-ui-styles/src/withTheme/withTheme.d.ts. If you're happy with the new interface i created (ThemedComponentProps) shall i move it in there? Today there's the same issue @eps1lon identified above.

[eps1lon]

@ianschmitz Perfect, thanks!