我正在尝试创建一个带有禁用按钮和工具提示的MUI ButtonGroup
。
以下代码块正确显示了按钮,但如此处所述(https://material-ui.com/components/tooltips/#disabled-elements),禁用的元素无法提供工具提示。
<ButtonGroup>
<Tooltip title={"This is button A"}>
<Button>{"Button A"}</Button>
</Tooltip>
<Tooltip title={"This is button B"}>
<Button disabled>{"Button B"}</Button>
</Tooltip>
</ButtonGroup>
但如果我在禁用按钮周围添加span
,组布局将被破坏。
<ButtonGroup>
<Tooltip title={"This is button A"}>
<Button>{"Button A"}</Button>
</Tooltip>
<Tooltip title={"This is button B"}>
<span>
<Button disabled>{"Button B"}</Button>
</span>
</Tooltip>
</ButtonGroup>
4条答案
按热度按时间zour9fqk1#
是的,这是可能的.你需要把你的按钮 Package 在span标签示例中
iyzzxitl2#
禁用按钮有两个方面会妨碍工具提示行为:
1.如您参考的文档中所述,禁用的
<button>
元素(独立于Material-UI)不会以支持工具提示正确行为的方式激发事件。1.禁用时,材料UI专门禁用材料UI的
ButtonBase
组件(由Button
利用)中的指针事件。第二个问题可以通过覆盖Material-UI的禁用样式以允许指针事件来解决:
第一个问题可以通过使用Button的
component
prop来使用<div>
元素而不是<button>
元素来解决。禁用的Button元素不接收单击事件,因此为了使Button仍然以禁用方式运行,此代码在禁用onClick
prop时将其删除。下面是同时禁用按钮B和C的工作演示。按钮A和B使用上述方法,按钮C是一个常规的物料UI按钮,没有用于比较的工具提示。它们下面的附加按钮用于切换B和C的禁用状态。
jgwigjjp3#
在按钮周围添加div/span有时会扰乱按钮的样式。因此,我们最好使用
<>
或<React.Fragment>
。但是,工具提示不适用于react片段,因此我们可以使用问题中提到的<span>
。但是,在这种情况下,由于此处使用ButtonGroup
,并且ButtonGroup
通过克隆子按钮元素并传递样式属性来工作,在这种情况下,我们必须将样式 prop 发送到“按钮B”。pokxtpni4#
对于mui〉v5,使用此选项