[SpeedDial] Fix crash when using custom style in FabProps (#18320)

mui · Nov 12, 2019 · 8306c25 · 8306c25
1 parent a26446f
commit 8306c25
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/docs/pages/api/speed-dial-action.md b/docs/pages/api/speed-dial-action.md
@@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">delay</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | Adds a transition delay, to allow a series of SpeedDialActions to be animated. |
-| <span class="prop-name">FabProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Fab`](/api/fab/) component. |
+| <span class="prop-name">FabProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Fab`](/api/fab/) component. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The Icon to display in the SpeedDial Fab. |
 | <span class="prop-name">TooltipClasses</span> | <span class="prop-type">object</span> | | Classes applied to the [`Tooltip`](/api/tooltip/) element. |
 | <span class="prop-name">tooltipOpen</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Make the tooltip always visible when the SpeedDial is open. |

diff --git 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,
@@ -103,19 +103,18 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(props, ref) {
 
  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={{
+ ...transitionStyle,
+ ...FabProps.style,
+ }}
  >
  {icon}
  </Fab>