[styles] Fix certain components not being considered mui elements

Author: eps1lon

.size-limit.js

@@ -41,7 +41,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '176 KB',
+    limit: '176.1 KB',
   },
   {
     name: 'The docs home page',

packages/material-ui-styles/src/hoistInternalStatics.js

@@ -0,0 +1,18 @@
+/**
+ * Copies internal immediate statics from material-ui from source to target
+ */
+export default function hoistStatics(target, source) {
+  const internals = ['muiName'];
+
+  for (let i = 0; i < internals.length; i += 1) {
+    const key = internals[i];
+    const descriptor = Object.getOwnPropertyDescriptor(source, key);
+    try {
+      Object.defineProperty(target, key, descriptor);
+    } catch (e) {
+      // Avoid failures from read-only properties and undefined descriptors
+    }
+  }
+
+  return target;
+}

packages/material-ui-styles/src/withStyles.js

@@ -8,6 +8,7 @@ import mergeClasses from './mergeClasses';
 import multiKeyStore from './multiKeyStore';
 import getStylesCreator from './getStylesCreator';
 import getThemeProps from './getThemeProps';
+import hoistStatics from './hoistInternalStatics';
 import { StylesContext } from './StylesProvider';
 import { ThemeContext } from './ThemeProvider';
 
@@ -332,6 +333,8 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
     WithStyles.displayName = `WithStyles(${getDisplayName(Component)})`;
   }
 
+  hoistStatics(WithStyles, Component);
+
   if (process.env.NODE_ENV !== 'production') {
     // Exposed for test purposes.
     WithStyles.Naked = Component;

packages/material-ui-styles/src/withTheme.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getDisplayName } from '@material-ui/utils';
+import hoistStatics from './hoistInternalStatics';
 import { ThemeContext } from './ThemeProvider';
 
 // Provide the theme object as a property to the input component.
@@ -25,6 +26,8 @@ const withTheme = () => Component => {
     WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
   }
 
+  hoistStatics(WithTheme, Component);
+
   return WithTheme;
 };