如何禁用MUI V5 SpeedDial中FAB图标的加载缩放动画？

页面加载时SpeedDial的图标会快速从小尺寸跳转到设定的36x36尺寸，即使给多个层级设置transition: none也无法阻止，核心原因是MUI默认样式优先级更高，且内部嵌套的SvgIcon也带有过渡动画，需要针对性覆盖：

• 强制禁用所有相关元素的过渡：用!important（或更具体的CSS选择器）覆盖MUI默认的过渡样式，包括SpeedDialIcon内部的图标元素和嵌套的SvgIcon。
• 锁定初始尺寸：给SpeedDialIcon设置min-width和min-height，确保组件挂载时直接应用目标尺寸，避免尺寸计算差异导致的跳变。
• 禁用Fab组件的过渡：SpeedDial基于Fab实现，需同时禁用Fab本身的过渡动画。

修改后的代码示例：

// Parent 
const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
  position: 'absolute',
  backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[300] : '#4A4545',
  width: 45,
  borderRadius: 25,
  zIndex: 12,
  transitionDuration: '0.4s',
  transform: 'none',
}));

// Fab 
const StyledSpeedDialIcon = styled(SpeedDialIcon)(({ theme }) => ({
  width: 36,
  height: 36,
  minWidth: 36,
  minHeight: 36,
  transition: 'none !important',
  transform: 'none !important',
  '& .MuiSpeedDialIcon-icon': {
    transition: 'none !important',
    transform: 'none !important',
  },
  '& .MuiSpeedDialIcon-iconWithOpenIconOpen': {
    transition: 'none !important',
    transform: 'none !important',
  },
  // 覆盖内部SvgIcon的过渡动画
  '& .MuiSvgIcon-root': {
    transition: 'none !important',
    animation: 'none !important',
  },
}));

// Component 
<StyledSpeedDial
  ariaLabel='SpeedDial'
  FabProps={{
    disabled: disableComponentOn,
    sx: {
      transition: 'none !important',
      animation: 'none !important',
      '&:before, &:after': {
        transition: 'none !important',
      },
    },
  }}
  icon={
    <StyledSpeedDialIcon
      icon={<ExpandMoreIcon />}
    />
  }
  onClose={handleClose}
  onClick={handleOpen}
  open={open}
  direction={'down'}
  sx={{ ...(!open && { backgroundColor: 'transparent' }) }}
>

若仍有问题，可检查是否存在全局样式或第三方样式影响SpeedDial的渲染，确保自定义样式优先级足够覆盖所有默认样式。

内容的提问来源于stack exchange，提问作者Richardson