[styled] Convert implicit styleProps to explicit (#26461)

mui · Jun 1, 2021 · bf11ab5 · bf11ab5
1 parent 363bbbf
commit bf11ab5
Show file tree

Hide file tree

Showing 23 changed files with 227 additions and 190 deletions.
diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js
@@ -36,12 +36,12 @@ const QontoConnector = styled(StepConnector)(({ theme }) => ({
   },
 }));
 
-const QontoStepIconRoot = styled('div')(({ theme, styleProps = {} }) => ({
+const QontoStepIconRoot = styled('div')(({ theme, styleProps }) => ({
   color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
   display: 'flex',
   height: 22,
   alignItems: 'center',
-  ...(!!styleProps.active && {
+  ...(styleProps.active && {
     color: '#784af4',
   }),
   '& .QontoStepIcon-completedIcon': {
@@ -110,7 +110,7 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
   },
 }));
 
-const ColorlibStepIconRoot = styled('div')(({ theme, styleProps = {} }) => ({
+const ColorlibStepIconRoot = styled('div')(({ theme, styleProps }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
   zIndex: 1,
   color: '#fff',
@@ -120,12 +120,12 @@ const ColorlibStepIconRoot = styled('div')(({ theme, styleProps = {} }) => ({
   borderRadius: '50%',
   justifyContent: 'center',
   alignItems: 'center',
-  ...(!!styleProps.active && {
+  ...(styleProps.active && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
     boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
   }),
-  ...(!!styleProps.completed && {
+  ...(styleProps.completed && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
   }),

diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.tsx b/docs/src/pages/components/steppers/CustomizedSteppers.tsx
@@ -36,26 +36,28 @@ const QontoConnector = styled(StepConnector)(({ theme }) => ({
   },
 }));
 
-const QontoStepIconRoot = styled('div')(({ theme, styleProps = {} }) => ({
-  color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
-  display: 'flex',
-  height: 22,
-  alignItems: 'center',
-  ...(!!styleProps.active && {
-    color: '#784af4',
+const QontoStepIconRoot = styled('div')<{ styleProps: { active?: boolean } }>(
+  ({ theme, styleProps }) => ({
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
+    display: 'flex',
+    height: 22,
+    alignItems: 'center',
+    ...(styleProps.active && {
+      color: '#784af4',
+    }),
+    '& .QontoStepIcon-completedIcon': {
+      color: '#784af4',
+      zIndex: 1,
+      fontSize: 18,
+    },
+    '& .QontoStepIcon-circle': {
+      width: 8,
+      height: 8,
+      borderRadius: '50%',
+      backgroundColor: 'currentColor',
+    },
   }),
-  '& .QontoStepIcon-completedIcon': {
-    color: '#784af4',
-    zIndex: 1,
-    fontSize: 18,
-  },
-  '& .QontoStepIcon-circle': {
-    width: 8,
-    height: 8,
-    borderRadius: '50%',
-    backgroundColor: 'currentColor',
-  },
-}));
+);
 
 function QontoStepIcon(props: StepIconProps) {
   const { active, completed, className } = props;
@@ -96,7 +98,9 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
   },
 }));
 
-const ColorlibStepIconRoot = styled('div')(({ theme, styleProps = {} }) => ({
+const ColorlibStepIconRoot = styled('div')<{
+  styleProps: { completed?: boolean; active?: boolean };
+}>(({ theme, styleProps }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
   zIndex: 1,
   color: '#fff',
@@ -106,12 +110,12 @@ const ColorlibStepIconRoot = styled('div')(({ theme, styleProps = {} }) => ({
   borderRadius: '50%',
   justifyContent: 'center',
   alignItems: 'center',
-  ...(!!styleProps.active && {
+  ...(styleProps.active && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
     boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
   }),
-  ...(!!styleProps.completed && {
+  ...(styleProps.completed && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
   }),

diff --git a/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.tsx b/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.tsx
@@ -143,7 +143,7 @@ const CalendarPickerRoot = styled(PickerView, {
   name: 'MuiCalendarPicker',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({
+})<{ styleProps: CalendarPickerProps<any> }>({
   display: 'flex',
   flexDirection: 'column',
 });
@@ -152,7 +152,7 @@ const CalendarPickerViewTransitionContainer = styled(FadeTransitionGroup, {
   name: 'MuiCalendarPicker',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer,
-})({
+})<{ styleProps: CalendarPickerProps<any> }>({
   overflowY: 'auto',
 });
 

diff --git a/packages/material-ui-lab/src/CalendarPicker/PickersCalendarHeader.tsx b/packages/material-ui-lab/src/CalendarPicker/PickersCalendarHeader.tsx
@@ -57,7 +57,9 @@ export interface PickersCalendarHeaderProps<TDate>
   onViewChange?: (view: CalendarPickerView) => void;
 }
 
-const PickersCalendarHeaderRoot = styled('div', { skipSx: true })({
+const PickersCalendarHeaderRoot = styled('div', { skipSx: true })<{
+  styleProps: PickersCalendarHeaderProps<any>;
+}>({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -69,7 +71,9 @@ const PickersCalendarHeaderRoot = styled('div', { skipSx: true })({
   minHeight: 30,
 });
 
-const PickersCalendarHeaderLabel = styled('div', { skipSx: true })(({ theme }) => ({
+const PickersCalendarHeaderLabel = styled('div', { skipSx: true })<{
+  styleProps: PickersCalendarHeaderProps<any>;
+}>(({ theme }) => ({
   display: 'flex',
   maxHeight: 30,
   overflow: 'hidden',
@@ -80,24 +84,26 @@ const PickersCalendarHeaderLabel = styled('div', { skipSx: true })(({ theme }) =
   fontWeight: theme.typography.fontWeightMedium,
 }));
 
-const PickersCalendarHeaderLabelItem = styled('div', { skipSx: true })({
+const PickersCalendarHeaderLabelItem = styled('div', { skipSx: true })<{
+  styleProps: PickersCalendarHeaderProps<any>;
+}>({
   marginRight: 6,
 });
 
 const PickersCalendarHeaderSwitchViewButton = styled(IconButton, { skipSx: true })({
   marginRight: 'auto',
 });
 
-const PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon, { skipSx: true })(
-  ({ theme, styleProps = {} }) => ({
-    willChange: 'transform',
-    transition: theme.transitions.create('transform'),
-    transform: 'rotate(0deg)',
-    ...(styleProps.openView === 'year' && {
-      transform: 'rotate(180deg)',
-    }),
+const PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon, { skipSx: true })<{
+  styleProps: PickersCalendarHeaderProps<any>;
+}>(({ theme, styleProps }) => ({
+  willChange: 'transform',
+  transition: theme.transitions.create('transform'),
+  transform: 'rotate(0deg)',
+  ...(styleProps.openView === 'year' && {
+    transform: 'rotate(180deg)',
   }),
-);
+}));
 
 function getSwitchingViewAriaText(view: CalendarPickerView) {
   return view === 'year'

diff --git a/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx b/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
@@ -81,7 +81,7 @@ const CalendarPickerSkeletonDay = styled(Skeleton, {
   name: 'MuiCalendarPickerSkeleton',
   slot: 'Day',
   overridesResolver: (props, styles) => styles.daySkeleton,
-})(({ styleProps = {} }) => ({
+})<{ styleProps: { day: number } }>(({ styleProps }) => ({
   margin: `0 ${DAY_MARGIN}px`,
   ...(styleProps.day === 0 && {
     visibility: 'hidden',

diff --git a/packages/material-ui-lab/src/ClockPicker/Clock.tsx b/packages/material-ui-lab/src/ClockPicker/Clock.tsx
@@ -79,33 +79,37 @@ const ClockPin = styled('div', { skipSx: true })(({ theme }) => ({
   transform: 'translate(-50%, -50%)',
 }));
 
-const ClockAmButton = styled(IconButton, { skipSx: true })(({ theme, styleProps = {} }) => ({
-  zIndex: 1,
-  position: 'absolute',
-  bottom: 8,
-  left: 8,
-  ...(styleProps.meridiemMode === 'am' && {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.light,
-    },
+const ClockAmButton = styled(IconButton, { skipSx: true })<{ styleProps: ClockProps<any> }>(
+  ({ theme, styleProps }) => ({
+    zIndex: 1,
+    position: 'absolute',
+    bottom: 8,
+    left: 8,
+    ...(styleProps.meridiemMode === 'am' && {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.light,
+      },
+    }),
   }),
-}));
+);
 
-const ClockPmButton = styled(IconButton, { skipSx: true })(({ theme, styleProps = {} }) => ({
-  zIndex: 1,
-  position: 'absolute',
-  bottom: 8,
-  right: 8,
-  ...(styleProps.meridiemMode === 'pm' && {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.light,
-    },
+const ClockPmButton = styled(IconButton, { skipSx: true })<{ styleProps: ClockProps<any> }>(
+  ({ theme, styleProps }) => ({
+    zIndex: 1,
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    ...(styleProps.meridiemMode === 'pm' && {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.light,
+      },
+    }),
   }),
-}));
+);
 
 /**
  * @ignore - internal component.

diff --git a/packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx b/packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx
@@ -19,31 +19,33 @@ export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement>
 
 export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
 
-const ClockNumberRoot = styled('span', { skipSx: true })(({ theme, styleProps = {} }) => ({
-  height: CLOCK_HOUR_WIDTH,
-  width: 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,
-  },
-  [`&.${classes.selected}`]: {
-    color: theme.palette.primary.contrastText,
-  },
-  [`&.${classes.disabled}`]: {
-    pointerEvents: 'none',
-    color: theme.palette.text.disabled,
-  },
-  ...(!!styleProps.inner && {
-    ...theme.typography.body2,
-    color: theme.palette.text.secondary,
+const ClockNumberRoot = styled('span', { skipSx: true })<{ styleProps: ClockNumberProps }>(
+  ({ theme, styleProps }) => ({
+    height: CLOCK_HOUR_WIDTH,
+    width: 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,
+    },
+    [`&.${classes.selected}`]: {
+      color: theme.palette.primary.contrastText,
+    },
+    [`&.${classes.disabled}`]: {
+      pointerEvents: 'none',
+      color: theme.palette.text.disabled,
+    },
+    ...(styleProps.inner && {
+      ...theme.typography.body2,
+      color: theme.palette.text.secondary,
+    }),
   }),
-}));
+);
 
 /**
  * @ignore - internal component.

diff --git a/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx b/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx
@@ -157,7 +157,7 @@ const ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
   name: 'MuiClockPicker',
   slot: 'ArrowSwticher',
   overridesResolver: (props, styles) => styles.arrowSwitcher,
-})({
+})<{ styleProps: ClockPickerProps<any> }>({
   position: 'absolute',
   right: 12,
   top: 15,

diff --git a/packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx b/packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx
@@ -9,36 +9,36 @@ export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement>
   value: number;
 }
 
-const ClockPointerRoot = experimentalStyled('div', { skipSx: true })(
-  ({ theme, styleProps = {} }) => ({
-    width: 2,
-    backgroundColor: theme.palette.primary.main,
-    position: 'absolute',
-    left: 'calc(50% - 1px)',
-    bottom: '50%',
-    transformOrigin: 'center bottom 0px',
-    ...(!!styleProps.toAnimateTransform && {
-      transition: theme.transitions.create(['transform', 'height']),
-    }),
+const ClockPointerRoot = experimentalStyled('div', { skipSx: true })<{
+  styleProps: ClockPointerProps & ClockPointer['state'];
+}>(({ theme, styleProps }) => ({
+  width: 2,
+  backgroundColor: theme.palette.primary.main,
+  position: 'absolute',
+  left: 'calc(50% - 1px)',
+  bottom: '50%',
+  transformOrigin: 'center bottom 0px',
+  ...(styleProps.toAnimateTransform && {
+    transition: theme.transitions.create(['transform', 'height']),
   }),
-);
+}));
 
-const ClockPointerThumb = experimentalStyled('div', { skipSx: true })(
-  ({ theme, styleProps = {} }) => ({
-    width: 4,
-    height: 4,
-    backgroundColor: theme.palette.primary.contrastText,
-    borderRadius: '50%',
-    position: 'absolute',
-    top: -21,
-    left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
-    border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
-    boxSizing: 'content-box',
-    ...(!!styleProps.hasSelected && {
-      backgroundColor: theme.palette.primary.main,
-    }),
+const ClockPointerThumb = experimentalStyled('div', { skipSx: true })<{
+  styleProps: ClockPointerProps & ClockPointer['state'];
+}>(({ theme, styleProps }) => ({
+  width: 4,
+  height: 4,
+  backgroundColor: theme.palette.primary.contrastText,
+  borderRadius: '50%',
+  position: 'absolute',
+  top: -21,
+  left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
+  border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
+  boxSizing: 'content-box',
+  ...(styleProps.hasSelected && {
+    backgroundColor: theme.palette.primary.main,
   }),
-);
+}));
 
 /**
  * @ignore - internal component.