migrate to emotion

mui · May 16, 2021 · 2143fd6 · 2143fd6
1 parent dd45a7c
commit 2143fd6
Showing 1 changed file with 49 additions and 42 deletions.
diff --git a/packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { generateUtilityClasses } from '@material-ui/unstyled';
 import PickersToolbarText from '../internal/pickers/PickersToolbarText';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
@@ -9,47 +10,58 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 import { DateTimePickerView } from './shared';
 
-export const styles: MuiStyles<
-  'root' | 'separator' | 'timeContainer' | 'dateContainer' | 'timeTypography' | 'penIcon'
-> = {
-  root: {
-    paddingLeft: 16,
-    paddingRight: 16,
-    justifyContent: 'space-around',
-  },
-  separator: {
-    margin: '0 4px 0 2px',
-    cursor: 'default',
-  },
-  timeContainer: {
-    display: 'flex',
-  },
-  dateContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-  timeTypography: {},
-  penIcon: {
+const classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
+
+const DateTimePickerToolbarRoot = styled(
+  PickersToolbar,
+  {},
+  { skipSx: true },
+)({
+  paddingLeft: 16,
+  paddingRight: 16,
+  justifyContent: 'space-around',
+  [`& .${classes.penIcon}`]: {
     position: 'absolute',
     top: 8,
     right: 8,
   },
-};
+});
+
+const DateTimePickerToolbarDateContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+});
+
+const DateTimePickerToolbarTimeContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+});
 
-export type DateTimePickerToolbarClassKey = keyof WithStyles<typeof styles>['classes'];
+const DateTimePickerToolbarSeparator = styled(
+  PickersToolbarText,
+  {},
+  { skipSx: true },
+)({
+  margin: '0 4px 0 2px',
+  cursor: 'default',
+});
 
 /**
  * @ignore - internal component.
  */
-const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof styles>> = (
-  props,
-) => {
+const DateTimePickerToolbar = (props: ToolbarComponentProps) => {
   const {
     ampm,
     date,
     dateRangeIcon,
-    classes,
     hideTabs,
     isMobileKeyboardViewOpen,
     onChange,
@@ -87,16 +99,15 @@ const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof
   return (
     <React.Fragment>
       {wrapperVariant !== 'desktop' && (
-        <PickersToolbar
+        <DateTimePickerToolbarRoot
           toolbarTitle={toolbarTitle}
           penIconClassName={classes.penIcon}
-          className={classes.root}
           isMobileKeyboardViewOpen={isMobileKeyboardViewOpen}
           toggleMobileKeyboardView={toggleMobileKeyboardView}
           {...other}
           isLandscape={false}
         >
-          <div className={classes.dateContainer}>
+          <DateTimePickerToolbarDateContainer>
             <PickersToolbarButton
               tabIndex={-1}
               variant="subtitle1"
@@ -113,27 +124,25 @@ const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof
               selected={openView === 'day'}
               value={dateText}
             />
-          </div>
-          <div className={classes.timeContainer}>
+          </DateTimePickerToolbarDateContainer>
+          <DateTimePickerToolbarTimeContainer>
             <PickersToolbarButton
               variant="h3"
               data-mui-test="hours"
               onClick={() => setOpenView('hours')}
               selected={openView === 'hours'}
               value={date ? formatHours(date) : '--'}
-              typographyClassName={classes.timeTypography}
             />
-            <PickersToolbarText variant="h3" value=":" className={classes.separator} />
+            <DateTimePickerToolbarSeparator variant="h3" value=":" />
             <PickersToolbarButton
               variant="h3"
               data-mui-test="minutes"
               onClick={() => setOpenView('minutes')}
               selected={openView === 'minutes'}
               value={date ? utils.format(date, 'minutes') : '--'}
-              typographyClassName={classes.timeTypography}
             />
-          </div>
-        </PickersToolbar>
+          </DateTimePickerToolbarTimeContainer>
+        </DateTimePickerToolbarRoot>
       )}
       {showTabs && (
         <DateTimePickerTabs
@@ -147,6 +156,4 @@ const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof
   );
 };
 
-export default withStyles(styles, { name: 'MuiInternalDateTimePickerToolbar' })(
-  DateTimePickerToolbar,
-);
+export default DateTimePickerToolbar;