[core] Merge options in experimentalStyled

docs/src/modules/branding/BrandingPersona.tsx

@@ -13,11 +13,10 @@ interface PersonaRootProps {
   styleProps: { size: 'large' | 'small' };
 }
 
-const PersonaRoot: OverridableComponent<BoxTypeMap<PersonaRootProps>> = styled(
-  Box,
-  {},
-  { name: 'Persona', slot: 'Root' },
-)<PersonaRootProps>(({ styleProps, theme }) => ({
+const PersonaRoot: OverridableComponent<BoxTypeMap<PersonaRootProps>> = styled(Box, {
+  name: 'Persona',
+  slot: 'Root',
+})<PersonaRootProps>(({ styleProps, theme }) => ({
   display: 'flex',
   marginTop: theme.spacing(1),
   marginBottom: theme.spacing(1),

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -1695,6 +1695,15 @@ Note: If you would like to move
 
 - This HOC was removed. There's an alternative using the `useMediaQuery` hook on [this page](/components/use-media-query/#migrating-from-withwidth).
 
+#### experimentalStyled
+
+- The options inside the `experimentalStyled` are now merged under one object.
+
+```diff
+-experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...);
++experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...);
+```
+
 ### `@material-ui/types`
 
 - Rename the exported `Omit` type in `@material-ui/types`. The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this StackOverflow answer for further details](https://stackoverflow.com/a/57103940/1009797).

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

@@ -59,21 +59,13 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
 
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
 
-const PickersCalendarDayHeader = styled(
-  'div',
-  {},
-  { skipSx: true },
-)({
+const PickersCalendarDayHeader = styled('div', { skipSx: true })({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
 
-const PickersCalendarWeekDayLabel = styled(
-  Typography,
-  {},
-  { skipSx: true },
-)(({ theme }) => ({
+const PickersCalendarWeekDayLabel = styled(Typography, { skipSx: true })(({ theme }) => ({
   width: 36,
   height: 40,
   margin: '0 2px',
@@ -84,32 +76,20 @@ const PickersCalendarWeekDayLabel = styled(
   color: theme.palette.text.secondary,
 }));
 
-const PickersCalendarLoadingContainer = styled(
-  'div',
-  {},
-  { skipSx: true },
-)({
+const PickersCalendarLoadingContainer = styled('div', { skipSx: true })({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight,
 });
 
-const PickersCalendarSlideTransition = styled(
-  SlideTransition,
-  {},
-  { skipSx: true },
-)({
+const PickersCalendarSlideTransition = styled(SlideTransition, { skipSx: true })({
   minHeight: weeksContainerHeight,
 });
 
-const PickersCalendarWeekContainer = styled('div', {}, { skipSx: true })({ overflow: 'hidden' });
+const PickersCalendarWeekContainer = styled('div', { skipSx: true })({ overflow: 'hidden' });
 
-const PickersCalendarWeek = styled(
-  'div',
-  {},
-  { skipSx: true },
-)({
+const PickersCalendarWeek = styled('div', { skipSx: true })({
   margin: `${DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center',

packages/material-ui-lab/src/CalendarPicker/PickersFadeTransitionGroup.tsx

@@ -22,13 +22,9 @@ const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', [
 
 const animationDuration = 500;
 
-const PickersFadeTransitionGroupRoot = styled(
-  TransitionGroup,
-  {},
-  {
-    skipSx: true,
-  },
-)<TransitionGroupProps>(({ theme }) => ({
+const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
+  skipSx: true,
+})<TransitionGroupProps>(({ theme }) => ({
   display: 'block',
   position: 'relative',
   [`& .${classes.fadeEnter}`]: {

packages/material-ui-lab/src/CalendarPicker/PickersSlideTransition.tsx

@@ -28,56 +28,54 @@ const classes = generateUtilityClasses('PrivatePickersSlideTransition', [
 
 export const slideAnimationDuration = 350;
 
-const PickersSlideTransitionRoot = styled(
-  TransitionGroup,
-  {},
-  { skipSx: true },
-)<TransitionGroupProps>(({ theme }) => {
-  const slideTransition = theme.transitions.create('transform', {
-    duration: slideAnimationDuration,
-    easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
-  });
-  return {
-    display: 'block',
-    position: 'relative',
-    overflowX: 'hidden',
-    '& > *': {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-    },
-    [`& .${classes['slideEnter-left']}`]: {
-      willChange: 'transform',
-      transform: 'translate(100%)',
-      zIndex: 1,
-    },
-    [`& .${classes['slideEnter-right']}`]: {
-      willChange: 'transform',
-      transform: 'translate(-100%)',
-      zIndex: 1,
-    },
-    [`& .${classes.slideEnterActive}`]: {
-      transform: 'translate(0%)',
-      transition: slideTransition,
-    },
-    [`& .${classes.slideExit}`]: {
-      transform: 'translate(0%)',
-    },
-    [`& .${classes['slideExitActiveLeft-left']}`]: {
-      willChange: 'transform',
-      transform: 'translate(-100%)',
-      transition: slideTransition,
-      zIndex: 0,
-    },
-    [`& .${classes['slideExitActiveLeft-right']}`]: {
-      willChange: 'transform',
-      transform: 'translate(100%)',
-      transition: slideTransition,
-      zIndex: 0,
-    },
-  };
-});
+const PickersSlideTransitionRoot = styled(TransitionGroup, { skipSx: true })<TransitionGroupProps>(
+  ({ theme }) => {
+    const slideTransition = theme.transitions.create('transform', {
+      duration: slideAnimationDuration,
+      easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
+    });
+    return {
+      display: 'block',
+      position: 'relative',
+      overflowX: 'hidden',
+      '& > *': {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0,
+      },
+      [`& .${classes['slideEnter-left']}`]: {
+        willChange: 'transform',
+        transform: 'translate(100%)',
+        zIndex: 1,
+      },
+      [`& .${classes['slideEnter-right']}`]: {
+        willChange: 'transform',
+        transform: 'translate(-100%)',
+        zIndex: 1,
+      },
+      [`& .${classes.slideEnterActive}`]: {
+        transform: 'translate(0%)',
+        transition: slideTransition,
+      },
+      [`& .${classes.slideExit}`]: {
+        transform: 'translate(0%)',
+      },
+      [`& .${classes['slideExitActiveLeft-left']}`]: {
+        willChange: 'transform',
+        transform: 'translate(-100%)',
+        transition: slideTransition,
+        zIndex: 0,
+      },
+      [`& .${classes['slideExitActiveLeft-right']}`]: {
+        willChange: 'transform',
+        transform: 'translate(100%)',
+        transition: slideTransition,
+        zIndex: 0,
+      },
+    };
+  },
+);
 
 /**
  * @ignore - do not document.

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

@@ -59,41 +59,29 @@ const useUtilityClasses = (styleProps: CalendarPickerSkeletonProps) => {
   return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
 };
 
-const CalendarPickerSkeletonRoot = styled(
-  'div',
-  {},
-  {
-    name: 'MuiCalendarPickerSkeleton',
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root,
-  },
-)({
+const CalendarPickerSkeletonRoot = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({
   alignSelf: 'start',
 });
 
-const CalendarPickerSkeletonWeek = styled(
-  'div',
-  {},
-  {
-    name: 'MuiCalendarPickerSkeleton',
-    slot: 'Week',
-    overridesResolver: (props, styles) => styles.week,
-  },
-)({
+const CalendarPickerSkeletonWeek = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Week',
+  overridesResolver: (props, styles) => styles.week,
+})({
   margin: `${DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center',
 });
 
-const CalendarPickerSkeletonDay = styled(
-  Skeleton,
-  {},
-  {
-    name: 'MuiCalendarPickerSkeleton',
-    slot: 'Day',
-    overridesResolver: (props, styles) => styles.daySkeleton,
-  },
-)(({ styleProps = {} }) => ({
+const CalendarPickerSkeletonDay = styled(Skeleton, {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Day',
+  overridesResolver: (props, styles) => styles.daySkeleton,
+})(({ styleProps = {} }) => ({
   margin: `0 ${DAY_MARGIN}px`,
   ...(styleProps.day === 0 && {
     visibility: 'hidden',

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

@@ -27,22 +27,14 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
   value: number;
 }
 
-const ClockRoot = styled(
-  'div',
-  {},
-  { skipSx: true },
-)(({ theme }) => ({
+const ClockRoot = styled('div', { skipSx: true })(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   margin: theme.spacing(2),
 }));
 
-const ClockClock = styled(
-  'div',
-  {},
-  { skipSx: true },
-)({
+const ClockClock = styled('div', { skipSx: true })({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -52,11 +44,7 @@ const ClockClock = styled(
   pointerEvents: 'none',
 });
 
-const ClockSquareMask = styled(
-  'div',
-  {},
-  { skipSx: true },
-)({
+const ClockSquareMask = styled('div', { skipSx: true })({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -74,11 +62,7 @@ const ClockSquareMask = styled(
   },
 });
 
-const ClockPin = styled(
-  'div',
-  {},
-  { skipSx: true },
-)(({ theme }) => ({
+const ClockPin = styled('div', { skipSx: true })(({ theme }) => ({
   width: 6,
   height: 6,
   borderRadius: '50%',
@@ -89,11 +73,7 @@ const ClockPin = styled(
   transform: 'translate(-50%, -50%)',
 }));
 
-const ClockAmButton = styled(
-  IconButton,
-  {},
-  { skipSx: true },
-)(({ theme, styleProps = {} }) => ({
+const ClockAmButton = styled(IconButton, { skipSx: true })(({ theme, styleProps = {} }) => ({
   zIndex: 1,
   position: 'absolute',
   bottom: 8,
@@ -107,11 +87,7 @@ const ClockAmButton = styled(
   }),
 }));
 
-const ClockPmButton = styled(
-  IconButton,
-  {},
-  { skipSx: true },
-)(({ theme, styleProps = {} }) => ({
+const ClockPmButton = styled(IconButton, { skipSx: true })(({ theme, styleProps = {} }) => ({
   zIndex: 1,
   position: 'absolute',
   bottom: 8,

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

@@ -16,11 +16,7 @@ export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement>
 
 export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
 
-const ClockNumberRoot = styled(
-  'span',
-  {},
-  { skipSx: true },
-)(({ theme, styleProps = {} }) => ({
+const ClockNumberRoot = styled('span', { skipSx: true })(({ theme, styleProps = {} }) => ({
   height: CLOCK_HOUR_WIDTH,
   width: CLOCK_HOUR_WIDTH,
   position: 'absolute',