如何通过CSS Modules为MUI SpeedDial的tooltipTitle设置悬停显示样式？

使用MUI的SpeedDial组件时遇到两个问题：

• 无法通过CSS Modules为tooltipTitle设置样式
• 当前所有提示框会同时显示，需要改为仅在鼠标悬停对应Action时显示提示框

现有代码 #

JSX组件代码 #

export const WidgetsMenu = () => {
    return (
        <StyledEngineProvider injectFirst>
        <SpeedDial
            ariaLabel="SpeedDial openIcon example"
            icon={<SpeedDialIcon openIcon={<CloseIcon />} />}
            className={styles.speedDial}
        >
            {actions.map((action) => (
                <SpeedDialAction
                    key={action.name}
                    icon={action.icon}
                    tooltipTitle={action.name}
                />
            ))}
        </SpeedDial>
        </StyledEngineProvider>
    );
};

CSS Modules样式代码 #

.speedDial :global {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  @media only screen and (max-width: 600px) {
    bottom: 2rem;
    right: 1.5rem;
  }

  .MuiSpeedDial-fab {
    color: #070707;
    background-color: #ffffff;
    width: 3rem;
    height: 3rem;
  }

  .MuiSpeedDialAction-fab {
    color: #ffffff;
    background-color: #070707;
    width: 3rem;
    height: 3rem;
  }
}

解决方案 #

1. 实现hover时单独显示提示框 #

通过tooltipOpen属性结合鼠标事件，控制单个SpeedDialAction的提示框显示状态：

import { useState } from 'react';

export const WidgetsMenu = () => {
  const [hoveredKey, setHoveredKey] = useState(null);

  return (
    <StyledEngineProvider injectFirst>
      <SpeedDial
        ariaLabel="SpeedDial openIcon example"
        icon={<SpeedDialIcon openIcon={<CloseIcon />} />}
        className={styles.speedDial}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipOpen={hoveredKey === action.name}
            onMouseEnter={() => setHoveredKey(action.name)}
            onMouseLeave={() => setHoveredKey(null)}
          />
        ))}
      </SpeedDial>
    </StyledEngineProvider>
  );
};

2. 通过CSS Modules定制Tooltip样式 #

在现有CSS Modules代码中，添加:global包裹的MUI Tooltip类名来覆盖默认样式：

.speedDial :global {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  @media only screen and (max-width: 600px) {
    bottom: 2rem;
    right: 1.5rem;
  }

  .MuiSpeedDial-fab {
    color: #070707;
    background-color: #ffffff;
    width: 3rem;
    height: 3rem;
  }

  .MuiSpeedDialAction-fab {
    color: #ffffff;
    background-color: #070707;
    width: 3rem;
    height: 3rem;
  }

  /* 自定义Tooltip样式 */
  .MuiTooltip-tooltip {
    background-color: #2d2d2d;
    color: #ffffff;
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 4px;
  }

  .MuiTooltip-arrow {
    color: #2d2d2d;
  }
}

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