material-ui 为SpeedDialAction的slotProps提供工具提示会导致在html中显示[object object],

5ktev3wc  于 2个月前  发布在  其他
关注(0)|答案(6)|浏览(33)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例: https://codesandbox.io/s/hardcore-sound-31v0eu
步骤:

  1. 创建一个 SpeedDial,其中包含一个或多个 SpeedDialAction
  2. 将一个 slotProps prop 添加到 SpeedDialAction,并附带一个类型为 typescript-valid 的对象

当前行为 😯

检查 #SpeedDialtooltipexample-action-0 等,您可以看到它在 html 中获得了一个带有 [object object]

的字面量属性。

预期行为 🤔

Slotprops 应按预期应用于工具提示。

上下文 🔦

我正在尝试自定义属于 SpeedDialAction 的子组件的颜色和其他样式。

您的环境 🌎

我附加了一个代码沙箱。

j2cgzkjk

j2cgzkjk1#

理想的为Tooltip添加类的方法不是通过slotProps,而是通过TooltipClasses,但似乎也存在一个问题,所以我创建了一个PR。
在这份文档中搜索TooltipClasses https://mui.com/material-ui/api/speed-dial-action/

<SpeedDialAction
            TooltipClasses={{
              tooltip: "your class name"
            }}
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipOpen
            onClick={handleClose}
          />
ibps3vxo

ibps3vxo2#

非常感谢!之前我也遇到了tooltipClasses的问题,但是没有像slotProps那样明显的问题,所以我以为自己做错了什么。

icnyk63a

icnyk63a3#

回答原始问题,同意 slotProps & slots 可能是我们今后要添加到所有组件中的内容。
对于特定元素的问题(回答 @sai6855 的观点),人们应该在 classes prop 中使用 staticTooltipLabel 键。我们故意没有使用 TooltipClasses ,因为在这种情况下我们渲染的组件不是一个 Tooltip 。添加一个类可能会引发更多问题,因为我们在与 Tooltip 组件实现自定义元素方面存在冲突,这是不正确的。

oknwwptz

oknwwptz4#

@Azeirah 我也遇到了这个问题。有人能分享一下如何使用staticTooltipLabel(如果可能的话,在代码沙箱中)来解决这个问题吗?提前感谢!

balp4ylt

balp4ylt5#

我们能得到这个状态更新吗?我们需要这个功能正常工作。

gcxthw6b

gcxthw6b6#

我也在寻找这个的示例。谢谢。

相关问题