[core] Fix innerRef being considered injected with certain HOCs (#14333)

Closes #14095

* [core] Add failing ts test

innerRef is not injected but intercepted

* [core] Fix innerRef being considered injected instead of intercepted

packages/material-ui/src/styles/withStyles.d.ts

@@ -50,7 +50,6 @@ export type WithStyles<
       ? K
       : never
   >;
-  innerRef?: React.Ref<any> | React.RefObject<any>;
 };
 
 export interface StyledComponentProps<ClassKey extends string = string> {

packages/material-ui/src/styles/withTheme.d.ts

@@ -3,7 +3,10 @@ import { PropInjector } from '..';
 
 export interface WithTheme {
   theme: Theme;
+}
+
+export interface ThemedComponentProps extends Partial<WithTheme> {
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
-export default function withTheme(): PropInjector<WithTheme, Partial<WithTheme>>;
+export default function withTheme(): PropInjector<WithTheme, ThemedComponentProps>;

packages/material-ui/src/withWidth/withWidth.d.ts

@@ -10,6 +10,9 @@ export interface WithWidthOptions {
 
 export interface WithWidth {
   width: Breakpoint;
+}
+
+export interface WithWidthProps extends Partial<WithWidth> {
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
@@ -27,4 +30,4 @@ export function isWidthUp(
 
 export default function withWidth(
   options?: WithWidthOptions,
-): PropInjector<WithWidth, Partial<WithWidth>>;
+): PropInjector<WithWidth, WithWidthProps>;

packages/material-ui/test/typescript/styles.spec.tsx

@@ -197,6 +197,11 @@ declare const themed: boolean;
   // Test that withTheme: true guarantees the presence of the theme
   const Foo = withStyles({}, { withTheme: true })(
     class extends React.Component<WithTheme> {
+      hasRef() {
+        // innerRef does not exists, originally caused https://github.com/mui-org/material-ui/issues/14095
+        return Boolean(this.props.innerRef); // $ExpectError
+      }
+
       render() {
         return <div style={{ margin: this.props.theme.spacing.unit }} />;
       }