[styles] Warn when using a missing style rule

docs/src/modules/components/MarkdownDocs.js

@@ -178,7 +178,7 @@ function MarkdownDocs(props) {
             </Portal>
           )}
 
-          <AppContent disableToc={disableToc} className={classes.root}>
+          <AppContent disableToc={disableToc}>
             {!disableEdit ? (
               <div className={classes.header}>
                 <EditPage

docs/src/modules/utils/generateMarkdown.js

@@ -74,6 +74,10 @@ function escapeCell(value) {
     .replace(/\|/g, '\\|');
 }
 
+function isOneOfWithString(type) {
+  return type.raw.indexOf('oneOfWithString') === 0;
+}
+
 function isElementTypeAcceptingRefProp(type) {
   return type.raw === 'elementTypeAcceptingRef';
 }
@@ -170,6 +174,18 @@ function generatePropType(type) {
       if (isElementAcceptingRefProp(type)) {
         return `element`;
       }
+      if (isOneOfWithString(type)) {
+        return generatePropType({
+          name: 'enum',
+          value: type.raw
+            .replace('oneOfWithString([', '')
+            .replace('])', '')
+            .split(',')
+            .map(x => x.trim())
+            .filter(x => x)
+            .map(x => ({ value: x, computed: false })),
+        });
+      }
 
       const deprecatedInfo = getDeprecatedInfo(type);
       if (deprecatedInfo !== false) {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import warning from 'warning';
 import { getDynamicStyles } from 'jss';
+import { getDisplayName } from '@material-ui/utils';
 import mergeClasses from '../mergeClasses';
 import multiKeyStore from './multiKeyStore';
 import useTheme from '../useTheme';
@@ -44,6 +45,33 @@ function getClasses({ state, stylesOptions }, classes, Component) {
       newClasses: classes,
       Component,
     });
+
+    if (process.env.NODE_ENV !== 'production' && typeof Proxy !== 'undefined') {
+      state.cacheClasses.value = new Proxy(state.cacheClasses.value, {
+        get(target, styleRule) {
+          if (
+            !(styleRule in target) &&
+            styleRule !== '@@toStringTag' &&
+            typeof styleRule !== 'symbol' &&
+            styleRule !== 'inspect'
+          ) {
+            const name = state.name || getDisplayName(Component);
+            warning(
+              false,
+              [
+                `Material-UI: you access a style rule \`${styleRule}\` that does not exist.`,
+                styleRule && `The style was definied on the \`${name}\` component.`,
+                '',
+                'Instead, the following classes keys are available:',
+                JSON.stringify(target, null, 2),
+              ].join('\n'),
+            );
+          }
+
+          return target[styleRule];
+        },
+      });
+    }
   }
 
   return state.cacheClasses.value;

packages/material-ui/src/Typography/Typography.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
+import oneOfWithString from '../utils/oneOfWithString';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -221,7 +222,7 @@ Typography.propTypes = {
   /**
    * Applies the theme typography styles.
    */
-  variant: PropTypes.oneOf([
+  variant: oneOfWithString([
     'h1',
     'h2',
     'h3',

packages/material-ui/src/utils/oneOfWithString.js

@@ -0,0 +1,5 @@
+import * as PropTypes from 'prop-types';
+
+export default function oneOfWithString() {
+  return PropTypes.string;
+}