MUI v5中如何自定义SpeedDialAction标签？解决样式复用问题

问题核心原因 #

SpeedDialAction 的静态 tooltip（设置tooltipOpen后）是通过 React Portal 挂载到 DOM 根节点的，并非作为 SpeedDialAction 元素的子节点存在。因此你通过styled()给 SpeedDialAction 添加的后代选择器& .MuiSpeedDialAction-staticTooltipLabel无法匹配到 tooltip 元素——两者不在同一个 DOM 层级里。

而sx属性是 MUI 组件的内置特性，SpeedDialAction 内部会自动将sx中针对 tooltip 的样式传递给对应的 tooltip 组件，所以能正常生效。

可行解决方案 #

方案1：封装自定义组件复用 tooltip 样式（最简便） #

直接创建一个封装好 tooltip 样式的自定义 SpeedDialAction 组件，无需依赖styled()：

import { SpeedDialAction, SpeedDialActionProps } from "@mui/material";

const CustomSpeedDialAction = ({ tooltipTitle, icon, ...props }: SpeedDialActionProps) => (
  <SpeedDialAction
    tooltipTitle={tooltipTitle}
    icon={icon}
    tooltipOpen
    tooltipProps={{
      sx: {
        width: "8rem",
        whiteSpace: "nowrap", // 强制不换行，确保文本完整显示
      },
    }}
    {...props}
  />
);

使用时直接替换原组件即可：

<CustomSpeedDialAction
  icon={<FileCopyIcon />}
  tooltipTitle="Copy the File"
/>

方案2：用 styled() 注入 tooltipProps #

如果一定要用styled()，可以通过给组件注入tooltipProps的方式，将样式直接传递给 tooltip 组件：

import { styled, SpeedDialAction, Theme } from "@mui/material";
import { SxProps } from "@mui/system";

const StyledSpeedDialAction = styled(SpeedDialAction)<{ tooltipSx?: SxProps<Theme> }>(
  ({ theme, tooltipSx }) => ({
    // 这里可以定义SpeedDialAction自身的样式（如图标颜色等）
    "& .MuiSpeedDialAction-icon": {
      color: theme.palette.primary.main,
    },
    // 通过tooltipProps传递tooltip的样式
    tooltipProps: {
      sx: {
        width: "8rem",
        whiteSpace: "nowrap",
        ...tooltipSx, // 允许传入额外样式覆盖默认值
      },
    },
  })
).withConfig({
  shouldForwardProp: (prop) => prop !== "tooltipSx", // 过滤自定义props，避免传递给DOM元素
});

方案3：定制 Tooltip 组件全局复用 #

如果需要在多个地方复用相同的 tooltip 样式，可以直接定制 MUI 的 Tooltip 组件，再让 SpeedDialAction 使用该组件：

import { styled, Tooltip, SpeedDialAction } from "@mui/material";

const CustomTooltip = styled(Tooltip)(() => ({
  "& .MuiSpeedDialAction-staticTooltipLabel": {
    width: "8rem",
    whiteSpace: "nowrap",
  },
}));

// 使用时指定TooltipComponent
<SpeedDialAction
  icon={<FileCopyIcon />}
  tooltipTitle="Copy the File"
  tooltipOpen
  TooltipComponent={CustomTooltip}
/>

为什么你的 Chip 组件能生效？ #

Chip 的 icon 是组件的直接子元素，DOM 层级完全在 Chip 内部，所以& .MuiChip-icon这种后代选择器能正确匹配到目标元素。而 SpeedDialAction 的 tooltip 被 portal 转移到了根节点，脱离了原组件的 DOM 层级，因此styled()的后代选择器无法生效。

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