[DateRangePicker] Migrate PickersToolbarText to emotion

packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx

@@ -1,46 +1,84 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
-import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
+import { SxProps } from '@material-ui/system';
+import {
+  experimentalStyled,
+  unstable_useThemeProps as useThemeProps,
+  Theme,
+} from '@material-ui/core/styles';
+import {
+  unstable_composeClasses as composeClasses,
+  generateUtilityClass,
+  generateUtilityClasses,
+} from '@material-ui/unstyled';
 import { ExtendMui } from './typings/helpers';
 
 export interface PickersToolbarTextProps extends ExtendMui<TypographyProps> {
+  component?: React.ElementType;
+  classes?: Partial<typeof pickersToolbarTextClasses>;
   selected?: boolean;
   value: React.ReactNode;
+  sx?: SxProps<Theme>;
 }
 
-export type PickersToolbarTextClassKey = 'root' | 'selected';
-export const styles: MuiStyles<PickersToolbarTextClassKey> = (
-  theme,
-): StyleRules<PickersToolbarTextClassKey> => {
-  return {
-    root: {
-      transition: theme.transitions.create('color'),
-      color: theme.palette.text.secondary,
-      '&$selected': {
-        color: theme.palette.text.primary,
-      },
-    },
-    selected: {},
+export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses;
+
+export function getPickersToolbarTextUtilityClass(slot: string) {
+  return generateUtilityClass('MuiPickersToolbarText', slot);
+}
+
+export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [
+  'root',
+  'selected',
+]);
+
+const useUtilityClasses = (styleProps: PickersToolbarTextProps) => {
+  const { selected, classes } = styleProps;
+
+  const slots = {
+    root: ['root', selected && 'selected'],
   };
-};
 
-const PickersToolbarText: React.FC<PickersToolbarTextProps & WithStyles<typeof styles>> = (
-  props,
-) => {
-  const { className, classes, selected, value, ...other } = props;
-
-  return (
-    <Typography
-      className={clsx(classes.root, className, {
-        [classes.selected]: selected,
-      })}
-      component="span"
-      {...other}
-    >
-      {value}
-    </Typography>
-  );
+  return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
 };
 
-export default withStyles(styles, { name: 'MuiPickersToolbarText' })(PickersToolbarText);
+const PickersToolbarTextRoot = experimentalStyled(
+  Typography,
+  {},
+  {
+    name: 'MuiPickersToolbarText',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root,
+  },
+)(({ theme }) => ({
+  transition: theme.transitions.create('color'),
+  color: theme.palette.text.secondary,
+  [`&.${pickersToolbarTextClasses.selected}`]: {
+    color: theme.palette.text.primary,
+  },
+}));
+
+const PickersToolbarText = React.forwardRef<HTMLSpanElement, PickersToolbarTextProps>(
+  function PickersToolbarText(inProps, ref) {
+    const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbarText' });
+    const { className, selected, value, ...other } = props;
+    const styleProps = { ...props };
+
+    const classes = useUtilityClasses(styleProps);
+
+    return (
+      <PickersToolbarTextRoot
+        ref={ref}
+        className={clsx(classes.root, className)}
+        component="span"
+        styleProps={styleProps}
+        {...other}
+      >
+        {value}
+      </PickersToolbarTextRoot>
+    );
+  },
+);
+
+export default PickersToolbarText;

packages/material-ui/src/styles/useThemeProps.d.ts

@@ -1,3 +1,4 @@
+import { Theme as MuiTheme } from '@material-ui/core/styles';
 import { Components } from './components';
 
 export interface ThemeWithProps {
@@ -16,7 +17,7 @@ export interface AdditionalThemeProps<Theme> {
 }
 
 export default function useThemeProps<
-  Theme extends ThemeWithProps,
+  Theme extends MuiTheme,
   Props,
   Name extends keyof any
 >(params: {