[lab] Drop usage of createStyles

.eslintrc.js

@@ -1,9 +1,15 @@
 const path = require('path');
 
-const forbitTopLevelMessage = [
+const forbidTopLevelMessage = [
   'Prefer one level nested imports to avoid bundling everything in dev mode',
   'See https://github.com/mui-org/material-ui/pull/24147 for the kind of win it can unlock.',
 ].join('\n');
+// This only applies to packages published from this monorepo.
+// If you build a library around `@material-ui/core` you can safely use `createStyles` without running into the same issue as we are.
+const forbidCreateStylesMessage =
+  'Use `Styles<Theme, Props, ClassKey>` instead if the styles are exported. Otherwise use `as const` assertions. ' +
+  '`createStyles` will lead to inlined, at-compile-time-resolved type-imports. ' +
+  'See https://github.com/microsoft/TypeScript/issues/36097#issuecomment-578324386 for more information';
 
 module.exports = {
   root: true, // So parent files don't get applied
@@ -233,12 +239,53 @@ module.exports = {
     },
     {
       files: ['*.tsx'],
+      excludedFiles: '*.spec.tsx',
       rules: {
+        // WARNING: If updated, make sure these rules are merged with `no-restricted-imports` (#ts-source-files)
         'no-restricted-imports': [
           'error',
           {
-            // Allow deeper imports for TypeScript types. TODO?
-            patterns: ['@material-ui/*/*/*/*', '!@material-ui/utils/macros/*.macro'],
+            patterns: [
+              // Allow deeper imports for TypeScript types. TODO?
+              '@material-ui/*/*/*/*',
+              // Macros are fine since they're transpiled into something else
+              '!@material-ui/utils/macros/*.macro',
+            ],
+          },
+        ],
+        'react/prop-types': 'off',
+      },
+    },
+    // Files used for generating TypeScript declaration files (#ts-source-files)
+    {
+      files: ['packages/*/src/**/*.tsx'],
+      excludedFiles: '*.spec.tsx',
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '@material-ui/core/styles',
+                importNames: ['createStyles'],
+                message: forbidCreateStylesMessage,
+              },
+              {
+                name: '@material-ui/styles',
+                importNames: ['createStyles'],
+                message: forbidCreateStylesMessage,
+              },
+              {
+                name: '@material-ui/styles/createStyles',
+                message: forbidCreateStylesMessage,
+              },
+            ],
+            patterns: [
+              // Allow deeper imports for TypeScript types. TODO?
+              '@material-ui/*/*/*/*',
+              // Macros are fine since they're transpiled into something else
+              '!@material-ui/utils/macros/*.macro',
+            ],
           },
         ],
         'react/prop-types': 'off',
@@ -299,11 +346,11 @@ module.exports = {
             paths: [
               {
                 name: '@material-ui/core',
-                message: forbitTopLevelMessage,
+                message: forbidTopLevelMessage,
               },
               {
                 name: '@material-ui/lab',
-                message: forbitTopLevelMessage,
+                message: forbidTopLevelMessage,
               },
             ],
           },

packages/material-ui-lab/src/ClockPicker/Clock.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import { createStyles, WithStyles, Theme, withStyles } from '@material-ui/core/styles';
+import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
 import ClockPointer from './ClockPointer';
 import { useUtils, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
 import { ClockViewType } from '../internal/pickers/constants/ClockType';
@@ -34,68 +34,74 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
   ) => string;
 }
 
-export const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      margin: theme.spacing(2),
-    },
-    clock: {
-      backgroundColor: 'rgba(0,0,0,.07)',
-      borderRadius: '50%',
-      height: 220,
-      width: 220,
-      flexShrink: 0,
-      position: 'relative',
-      pointerEvents: 'none',
-    },
-    squareMask: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      pointerEvents: 'auto',
-      outline: 0,
-      // Disable scroll capabilities.
-      touchAction: 'none',
-      userSelect: 'none',
-      '&:active': {
-        cursor: 'move',
-      },
-    },
-    pin: {
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-      backgroundColor: theme.palette.primary.main,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-    amButton: {
-      zIndex: 1,
-      left: 8,
-      position: 'absolute',
-      bottom: 8,
-    },
-    pmButton: {
-      zIndex: 1,
-      position: 'absolute',
-      bottom: 8,
-      right: 8,
+export type ClockClassKey =
+  | 'root'
+  | 'clock'
+  | 'squareMask'
+  | 'pin'
+  | 'amButton'
+  | 'pmButton'
+  | 'meridiemButtonSelected';
+
+export const styles: MuiStyles<ClockClassKey> = (theme): StyleRules<ClockClassKey> => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(2),
+  },
+  clock: {
+    backgroundColor: 'rgba(0,0,0,.07)',
+    borderRadius: '50%',
+    height: 220,
+    width: 220,
+    flexShrink: 0,
+    position: 'relative',
+    pointerEvents: 'none',
+  },
+  squareMask: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'auto',
+    outline: 0,
+    // Disable scroll capabilities.
+    touchAction: 'none',
+    userSelect: 'none',
+    '&:active': {
+      cursor: 'move',
     },
-    meridiemButtonSelected: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-      '&:hover': {
-        backgroundColor: theme.palette.primary.light,
-      },
+  },
+  pin: {
+    width: 6,
+    height: 6,
+    borderRadius: '50%',
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+  amButton: {
+    zIndex: 1,
+    left: 8,
+    position: 'absolute',
+    bottom: 8,
+  },
+  pmButton: {
+    zIndex: 1,
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+  },
+  meridiemButtonSelected: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light,
     },
-  });
-
-export type ClockClassKey = keyof WithStyles<typeof styles>['classes'];
+  },
+});
 
 /**
  * @ignore - internal component.

packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { createStyles, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
+import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
 
 export interface ClockNumberProps {
@@ -12,38 +12,37 @@ export interface ClockNumberProps {
   'aria-label': string;
 }
 
-export const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      width: CLOCK_HOUR_WIDTH,
-      height: CLOCK_HOUR_WIDTH,
-      position: 'absolute',
-      left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: '50%',
-      color: theme.palette.text.primary,
-      '&:focused': {
-        backgroundColor: theme.palette.background.paper,
-      },
-      '&$selected': {
-        color: theme.palette.primary.contrastText,
-      },
-      '&$disabled': {
-        pointerEvents: 'none',
-        color: theme.palette.text.disabled,
-      },
+export type ClockNumberClassKey = 'root' | 'selected' | 'disabled' | 'inner';
+
+export const styles: MuiStyles<ClockNumberClassKey> = (theme): StyleRules<ClockNumberClassKey> => ({
+  root: {
+    width: CLOCK_HOUR_WIDTH,
+    height: CLOCK_HOUR_WIDTH,
+    position: 'absolute',
+    left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    color: theme.palette.text.primary,
+    '&:focused': {
+      backgroundColor: theme.palette.background.paper,
     },
-    selected: {},
-    disabled: {},
-    inner: {
-      ...theme.typography.body2,
-      color: theme.palette.text.secondary,
+    '&$selected': {
+      color: theme.palette.primary.contrastText,
     },
-  });
-
-export type ClockNumberClassKey = keyof WithStyles<typeof styles>['classes'];
+    '&$disabled': {
+      pointerEvents: 'none',
+      color: theme.palette.text.disabled,
+    },
+  },
+  selected: {},
+  disabled: {},
+  inner: {
+    ...theme.typography.body2,
+    color: theme.palette.text.secondary,
+  },
+});
 
 /**
  * @ignore - internal component.

packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
 import Clock from './Clock';
 import { pipe } from '../internal/pickers/utils';
 import { useUtils, useNow, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
@@ -80,13 +80,13 @@ export interface ClockPickerProps<TDate>
   showViewSwitcher?: boolean;
 }
 
-export const styles = createStyles({
+export const styles: MuiStyles<'arrowSwitcher'> = {
   arrowSwitcher: {
     position: 'absolute',
     right: 12,
     top: 15,
   },
-});
+};
 
 const getDefaultClockLabelText = <TDate extends any>(
   view: 'hours' | 'minutes' | 'seconds',