Use forwardRef to pass on the ref(kriasoft#169)

package.json

@@ -34,7 +34,8 @@
   "dependencies": {
     "hoist-non-react-statics": "^3.0.0",
     "loader-utils": "^1.2.3",
-    "react": "^16.3.0"
+    "react": "^16.3.0",
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@babel/core": "^7.3.3",
@@ -53,7 +54,6 @@
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "prettier": "^1.16.4",
-    "prop-types": "^15.7.2",
     "react-dom": "^16.8.2",
     "rollup": "^1.2.1",
     "rollup-plugin-babel": "^4.3.2",

src/withStyles.js

@@ -8,6 +8,7 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics'
 
 import StyleContext from './StyleContext'
@@ -27,17 +28,24 @@ function withStyles(...styles) {
       }
 
       render() {
-        return <ComposedComponent {...this.props} />
+        const {__$$withStylesRef, ...props} = this.props;
+        return <ComposedComponent ref={__$$withStylesRef} {...props} />
       }
     }
 
     const displayName = ComposedComponent.displayName || ComposedComponent.name || 'Component'
 
-    WithStyles.displayName = `WithStyles(${displayName})`
+    WithStyles.propTypes = {
+      __$$withStylesRef: PropTypes.func.isRequired,
+    }
     WithStyles.contextType = StyleContext
-    WithStyles.ComposedComponent = ComposedComponent
 
-    return hoistStatics(WithStyles, ComposedComponent)
+    const ForwardedWithStyles = React.forwardRef((props, ref) => <WithStyles {...props} __$$withStylesRef={ref} />)
+
+    ForwardedWithStyles.ComposedComponent = ComposedComponent
+    ForwardedWithStyles.displayName = `WithStyles(${displayName})`
+
+    return hoistStatics(ForwardedWithStyles, ComposedComponent);
   }
 }