[SpeedDial] Crash when using custom style in FabProps of SpeedDialAction

[rahuliet]

While working on SpeedDial component of React's Material UI the following is needed:

1. Change the background color of speeddial button
2. Change the background color of speeddialactions
3. Change the font size of tooltip displayed on hover over speeddialactions

All this was done successfully earlier with the following dependencies at sandbox URL for working code

• material-ui/core 4.1.3
• material-ui/lab 4.0.0.alpha.18

But now with latest packages I have updated code posted here sandbox URL for semi working code where things are getting bumpy

• material-ui/core 4.6.0
• material-ui/lab 4.0.0.alpha.31
  when hovered over speeddialaction there is an error that causes the SpeedDial to disappear. Error details can be seen in the console of sandbox URL for semi working code

[oliviertassinari]

@rahuliet Thank you for this bug report. I can confirm the exception. What do you think of this diff?

diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
index 545d82adb..31411da6b 100644
--- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -80,7 +80,7 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(props, ref) {
     classes,
     className,
     delay = 0,
-    FabProps,
+    FabProps = {},
     icon,
     id,
     open,
@@ -101,21 +101,18 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(props, ref) {
     setTooltipOpen(true);
   };

-  const transitionStyle = { transitionDelay: `${delay}ms` };
-
-  if (FabProps && FabProps.style) {
-    FabProps.style.transitionDelay = `${delay}ms`;
-  }
-
   const fab = (
     <Fab
       size="small"
       className={clsx(classes.fab, !open && classes.fabClosed, className)}
       tabIndex={-1}
       role="menuitem"
-      style={transitionStyle}
       aria-describedby={`${id}-label`}
       {...FabProps}
+      style={{
+        transitionDelay: `${delay}ms`,
+        ...FabProps.style,
+      }}
     >
       {icon}
     </Fab>

Do you want to submit a pull request? :)

[rahuliet]

This is fixed now in alpha32 release..thanks :)