Drop createStyles from published files

Author: eps1lon

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 { WithStyles, Theme, 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';
@@ -35,7 +35,7 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
 }
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       display: 'flex',
       justifyContent: 'center',
@@ -93,7 +93,7 @@ export const styles = (theme: Theme) =>
         backgroundColor: theme.palette.primary.light,
       },
     },
-  });
+  } as const);
 
 export type ClockClassKey = keyof WithStyles<typeof styles>['classes'];
 

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 { WithStyles, withStyles, Theme } from '@material-ui/core/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
 
 export interface ClockNumberProps {
@@ -13,7 +13,7 @@ export interface ClockNumberProps {
 }
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       width: CLOCK_HOUR_WIDTH,
       height: CLOCK_HOUR_WIDTH,
@@ -41,7 +41,7 @@ export const styles = (theme: Theme) =>
       ...theme.typography.body2,
       color: theme.palette.text.secondary,
     },
-  });
+  } as const);
 
 export type ClockNumberClassKey = keyof WithStyles<typeof styles>['classes'];
 

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 { 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 = {
   arrowSwitcher: {
     position: 'absolute',
     right: 12,
     top: 15,
   },
-});
+} as const;
 
 const getDefaultClockLabelText = <TDate extends any>(
   view: 'hours' | 'minutes' | 'seconds',

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { withStyles, createStyles, Theme, WithStyles } from '@material-ui/core/styles';
+import { withStyles, Theme, WithStyles } from '@material-ui/core/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
 import { ClockViewType } from '../internal/pickers/constants/ClockType';
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       width: 2,
       backgroundColor: theme.palette.primary.main,
@@ -31,7 +31,7 @@ export const styles = (theme: Theme) =>
     noPoint: {
       backgroundColor: theme.palette.primary.main,
     },
-  });
+  } as const);
 
 export type ClockPointerClassKey = keyof WithStyles<typeof styles>['classes'];
 

packages/material-ui-lab/src/DatePicker/DatePickerToolbar.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
-import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { WithStyles, withStyles } from '@material-ui/core/styles';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from '../internal/pickers/date-utils';
 import { DatePickerView } from '../internal/pickers/typings/Views';
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 
-export const styles = createStyles({
+export const styles = {
   root: {},
   dateTitleLandscape: {
     margin: 'auto 16px auto auto',
@@ -17,7 +17,7 @@ export const styles = createStyles({
     position: 'relative',
     top: 4,
   },
-});
+} as const;
 export type DatePickerToolbarClassKey = keyof WithStyles<typeof styles>['classes'];
 
 /**

packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { withStyles, WithStyles, Theme } from '@material-ui/core/styles';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { RangeInput, DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
 import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
@@ -9,7 +9,7 @@ import { mergeRefs, executeInTheNextEventLoopTick } from '../internal/pickers/ut
 import { DateInputProps, MuiTextFieldProps } from '../internal/pickers/PureDateInput';
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       display: 'flex',
       alignItems: 'baseline',
@@ -24,7 +24,7 @@ export const styles = (theme: Theme) =>
         margin: '0 16px',
       },
     },
-  });
+  } as const);
 
 export interface ExportedDateRangePickerInputProps {
   /**

packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
+import { withStyles, WithStyles } from '@material-ui/core/styles';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 import { DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
 
-export const styles = createStyles({
+export const styles = {
   root: {},
   penIcon: {
     position: 'relative',
@@ -16,7 +16,7 @@ export const styles = createStyles({
   dateTextContainer: {
     display: 'flex',
   },
-});
+} as const;
 
 interface DateRangePickerToolbarProps
   extends CurrentlySelectingRangeEndProps,

packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { withStyles, WithStyles, Theme } from '@material-ui/core/styles';
 import { DateRange } from './RangeTypes';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { calculateRangePreview } from './date-range-manager';
@@ -45,7 +45,7 @@ interface DesktopDateRangeCalendarProps<TDate>
 }
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       display: 'flex',
       flexDirection: 'row',
@@ -65,7 +65,7 @@ export const styles = (theme: Theme) =>
       alignItems: 'center',
       justifyContent: 'space-between',
     },
-  });
+  } as const);
 
 function getCalendarsArray(calendars: ExportedDesktopDateRangeCalendarProps<unknown>['calendars']) {
   switch (calendars) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles, WithStyles, alpha, createStyles, Theme } from '@material-ui/core/styles';
+import { withStyles, WithStyles, alpha, Theme } from '@material-ui/core/styles';
 import { DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersDay, { PickersDayProps, areDayPropsEqual } from '../PickersDay/PickersDay';
@@ -26,7 +26,7 @@ const startBorderStyle = {
 };
 
 const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       '&:first-child $rangeIntervalDayPreview': {
         ...startBorderStyle,
@@ -92,7 +92,7 @@ const styles = (theme: Theme) =>
     },
     rangeIntervalDayPreviewStart: {},
     rangeIntervalDayPreviewEnd: {},
-  });
+  } as const);
 
 /**
  * @ignore - do not document.

packages/material-ui-lab/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Paper from '@material-ui/core/Paper';
-import { createStyles, WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles';
+import { WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles';
 import TimeIcon from '../internal/svg-icons/Time';
 import DateRangeIcon from '../internal/svg-icons/DateRange';
 import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
@@ -36,7 +36,7 @@ export const styles = (theme: Theme) => {
   const tabsBackground =
     theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.background.default;
 
-  return createStyles({
+  return {
     root: {},
     modeDesktop: {
       order: 1,
@@ -45,7 +45,7 @@ export const styles = (theme: Theme) => {
       color: theme.palette.getContrastText(tabsBackground),
       backgroundColor: tabsBackground,
     },
-  });
+  };
 };
 
 export type DateTimePickerTabsClassKey = keyof WithStyles<typeof styles>['classes'];

packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { WithStyles, withStyles } from '@material-ui/core/styles';
 import PickersToolbarText from '../internal/pickers/PickersToolbarText';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import ToolbarButton from '../internal/pickers/PickersToolbarButton';
@@ -9,7 +9,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 import { DateTimePickerView } from '../internal/pickers/typings/Views';
 
-export const styles = createStyles({
+export const styles = {
   root: {
     paddingLeft: 16,
     paddingRight: 16,
@@ -33,7 +33,7 @@ export const styles = createStyles({
     top: 8,
     right: 8,
   },
-});
+} as const;
 
 export type DateTimePickerToolbarClassKey = keyof WithStyles<typeof styles>['classes'];
 

packages/material-ui-lab/src/DayPicker/DayPicker.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 { withStyles, WithStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import MonthPicker from '../MonthPicker/MonthPicker';
 import { useCalendarState } from './useCalendarState';
@@ -63,7 +63,7 @@ export type ExportedDayPickerProps<TDate> = Omit<
   | 'className'
 >;
 
-export const styles = createStyles({
+export const styles = {
   root: {
     display: 'flex',
     flexDirection: 'column',
@@ -79,7 +79,7 @@ export const styles = createStyles({
     minHeight: (DAY_SIZE + DAY_MARGIN * 4) * 7,
     height: '100%',
   },
-});
+} as const;
 
 export type DayPickerClassKey = keyof WithStyles<typeof styles>['classes'];
 

packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
-import { createStyles, WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles';
+import { WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles';
 import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
 import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
@@ -61,7 +61,7 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
 
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       minHeight: weeksContainerHeight,
     },
@@ -94,7 +94,7 @@ export const styles = (theme: Theme) =>
       alignItems: 'center',
       color: theme.palette.text.secondary,
     },
-  });
+  } as const);
 
 export type PickersCalendarClassKey = keyof WithStyles<typeof styles>['classes'];
 

packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Fade from '@material-ui/core/Fade';
-import { createStyles, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
+import { WithStyles, withStyles, Theme } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import { SlideDirection } from './PickersSlideTransition';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
@@ -60,7 +60,7 @@ export interface PickersCalendarHeaderProps<TDate>
 }
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       display: 'flex',
       alignItems: 'center',
@@ -96,7 +96,7 @@ export const styles = (theme: Theme) =>
     labelItem: {
       marginRight: 6,
     },
-  });
+  } as const);
 
 export type PickersCalendarHeaderClassKey = keyof WithStyles<typeof styles>['classes'];
 

packages/material-ui-lab/src/DayPicker/PickersFadeTransitionGroup.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 { WithStyles, withStyles, Theme } from '@material-ui/core/styles';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 interface FadeTransitionProps {
@@ -12,7 +12,7 @@ interface FadeTransitionProps {
 
 const animationDuration = 500;
 export const styles = (theme: Theme) =>
-  createStyles({
+  ({
     root: {
       display: 'block',
       position: 'relative',
@@ -36,7 +36,7 @@ export const styles = (theme: Theme) =>
         duration: animationDuration / 2,
       }),
     },
-  });
+  } as const);
 
 export type PickersFadeTransitionGroupClassKey = keyof WithStyles<typeof styles>['classes'];