在SpeedDialAction中添加按钮文本/标签 - Material-UI v1 / React

Question

我正在尝试向嵌套的<SpeedDialAction />组件添加标签，并在图标旁边显示按钮文字，如下所示：

但似乎children没有渲染：

...
<SpeedDialAction
  key={action.name}
  icon={action.icon}
  tooltipTitle={action.name}
  onClick={this.handleClick}
>
  Foo
</SpeedDialAction>
...

我也尝试使用ButtonProps道具作为listed in the docs，但这也没有做到。

Answer 1

我看一下SpeedDialAction源代码https://github.com/mui-org/material-ui/blob/6f9eecf48baca339a6b15c5fcfb683cba11e4871/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js

• Tooltip的标题仅在悬停时显示，但可以通过将默认状态更改为true轻松完成，例如：SpeedDialAction.js文件中的state={ tooltipOpen: true }。< / p>

• 但是，Tooltip中的SpeedDialAction组件没有引用，因此从外部访问setState并不容易。

最简单的解决方案是创建自定义SpeedDialAction组件 仅SpeedDialAction组件内容Tooltip和Button，这些内容很难修改。

有codeandbox https://codesandbox.io/s/9zpyj4o0zo
您只需将SpeedDialAction.js文件添加到项目中即可。

<强>更新
已在代码框中删除了onClose中的Tooltip个事件。修复了点击后标题消失的问题。