Warning "Material-UI: this elevation `1` is not implemented" with disableGeneration to true

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

No warning should occur.

Steps to Reproduce 🕹

This issue happens in SSR. On the server. We use ServerStyleSheets with disableGeneration to true (for performance gains).

const sheetsPrepass = new ServerStyleSheets({ disableGeneration: true }); and wrap the react element such as this sheetsPrepass.collect(reactElement).

The issue occurs only when disableGeneration is set to true.

I think this is due to this. classes is empty with disableGeneration on the server, while it’s not in other cases. I’m not sure how it should be fixed though.

https://github.com/mui-org/material-ui/blob/51b2b927cf31b59f16dbe7d2a51ef1ee111845cc/packages/material-ui/src/Paper/Paper.js#L44-L49

I don’t think a codesandbox si necessary here as most of the information is there.

Thank you 🚀 !

Tech	Version
Material-UI	v4.9.5
React	v16.12.0
Browser	NodeJS on the server

[oliviertassinari]

@nesso-pfl I don’t think that we can use the prop-type check anymore. Something in this order (maybe need to improve the warning message)

diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
index b1431b60d4..6cf24d052b 100644
--- a/packages/material-ui/src/Paper/Paper.js
+++ b/packages/material-ui/src/Paper/Paper.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
 import { useThemeVariants } from '@material-ui/styles';
 import withStyles from '../styles/withStyles';
+import useTheme from '../styles/useTheme';

 export const styles = (theme) => {
   const elevations = {};
@@ -56,6 +56,14 @@ const Paper = React.forwardRef(function Paper(props, ref) {
     'MuiPaper',
   );

+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const theme = useTheme();
+    if (theme.shadows[elevation] === undefined) {
+      console.warn(`Material-UI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`);
+    }
+  }
+
   return (
     <Component
       className={clsx(
@@ -101,17 +109,7 @@ Paper.propTypes = {
    * It accepts values between 0 and 24 inclusive.
    * @default 1
    */
-  elevation: chainPropTypes(PropTypes.number, (props) => {
-    const { classes, elevation } = props;
-    // in case `withStyles` fails to inject we don't need this warning
-    if (classes === undefined) {
-      return null;
-    }
-    if (elevation != null && classes[`elevation${elevation}`] === undefined) {
-      return new Error(`Material-UI: This elevation \`${elevation}\` is not implemented.`);
-    }
-    return null;
-  }),
+  elevation: PropTypes.number,
   /**
    * If `true`, rounded corners are disabled.
    * @default false

[oliviertassinari]

As far as I know, the problem still stand. We rely on the classes, while we should depend on the theme.