React Material UI自定义Tooltip和Speed Dial样式控制台报错如何解决

错误原因 #

你遇到的报错是因为给SpeedDialAction的TooltipClasses属性传入了完整的classes对象，这个对象里包含speedDial类名，但Tooltip组件本身没有对应的speedDial样式插槽，所以触发了Material-UI的样式校验报错。

解决方案 #

只需要修改SpeedDialAction的TooltipClasses传值逻辑，仅传入Tooltip组件支持的自定义样式即可，原有SpeedDial的位置配置不需要改动。

修改后的组件代码如下：

<SpeedDial
  ariaLabel="Tutor SpeedDial"
  className={classes.speedDial}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
  onClose={handleClose}
  onOpen={handleOpen}
  open={open}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
      // 仅传入Tooltip支持的tooltip类，不要传入完整classes对象
      TooltipClasses={{ tooltip: classes.tooltip }}
      onClick={handleClose}
    />
  ))}
</SpeedDial>

效果说明 #

修改后两个需求都可以正常实现：

• SpeedDial的位置保持你配置的绝对定位，距离底部2个spacing、右侧0个spacing
• Tooltip的背景色、字号自定义样式正常生效
• 控制台不会再抛出无效类名的报错

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