React Material UI 自定义工具提示和快速拨号样式

Posted 2023-02-22

【中文标题】React Material UI 自定义工具提示和快速拨号样式

【英文标题】：React Material UI custom tooltip AND speed dial style

【发布时间】：2021-10-24 20:51:07

【问题描述】：

我正在尝试自定义工具提示外观和快速拨号的位置，但同时执行这两项操作时出错。

const useStyles = makeStyles((theme) => (
  root: 
    height: 380,
    transform: "translateZ(0px)",
    flexGrow: 1,
  ,
  speedDial: 
    position: "absolute",
    bottom: theme.spacing(2),
    right: theme.spacing(0),
  ,
  tooltip: 
    backgroundColor: "#37517e",
    fontSize: "1.1em",
  ,
));

      <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
            TooltipClasses=classes
            onClick=handleClose
          />
        ))
      </SpeedDial>

代码实际上可以编译并且可以工作，但是我得到一个控制台错误

index.js:1 Material-UI：提供给 classes 属性的键 speedDial 未在 ForwardRef(Tooltip) 中实现。 您只能覆盖以下之一：popper,popperInteractive,popperArrow,tooltip,tooltipArrow,arrow,touch,tooltipPlacementLeft,tooltipPlacementRight,tooltipPlacementTop,tooltipPlacementBottom。

很明显，问题是因为 ToolTipClasses 无法覆盖 speedDial 类，但我不知道该怎么做。

任何指导将不胜感激 谢谢

【参考方案1】：

我通过创建 StyledSpeedDial 来提出解决方案，这样我就可以从类样式中删除快速拨号对象

const StyledSpeedDial = styled(SpeedDial)(( theme ) => (
  position: "absolute",
  "&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft": 
    bottom: theme.spacing(2),
    right: theme.spacing(0),
  ,
));

  <StyledSpeedDial
        ariaLabel="Tutor SpeedDial"
        icon=<SpeedDialIcon openIcon=<EditIcon /> />
        onClose=handleClose
        onOpen=handleOpen
        open=open
      >
        actions.map((action) => (
          <SpeedDialAction
            key=action.name
            icon=action.icon
            tooltipTitle=action.name
            TooltipClasses=classes
            onClick=handleClose
          />
        ))
      </StyledSpeedDial>