javascript - 材料 ui 列表项中图标按钮的工具提示未按预期工作
问题描述
我对 Material UI 和 React 很陌生。我有一个非常奇怪的 UI 问题,我希望这里有人能指出我做错了什么。
我在做什么: 我有一个列表。对于每个列表项,我想要一些按钮指向不同的 URL。这是我的清单的代码。这有点伪代码。每个“列表项”都是使用 map 生成的,该 map 遍历以 JSON 格式保存的数据:
<List>
<ListItem button component="a" href={infoUrl}>
<ListItemAvatar>
<Avatar src={itemIcon} />
</ListItemAvatar>
<ListItemText
primary={this.props.project.name_with_namespace}
secondary={this.props.project.description}
/>
<ListItemSecondaryAction>
<Tooltip id="button-report" title="Report">
<IconButton area-label="Report" href={reportUrl}>
<AssessmentIcon />
</IconButton>
</Tooltip>
<Tooltip id="button-codeRepo" title="Code Repository">
<IconButton area-label="Code Repository" href={repoUrl}>
<CodeIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
</List>
问题:列表显示所有列表项。主要和次要文本以及每个列表项的头像也正确显示,包括 2 个“图标按钮”。
问题是添加IconButton
到ListItemSecondaryAction
. 对于第一个列表项,一切都很好。对于所有其他列表项,我必须将鼠标指针移动到图标按钮的底部边缘才能单击并查看工具提示。
如果我完全删除工具提示,我对点击没有任何问题。我可以将鼠标指针移动到图标按钮的圆环内的中间或其他区域并执行单击。
我在这里没有Tooltip
正确使用吗?尝试了 Chrome 和 FireFox 并看到了同样的问题。
解决方案
只需添加父 div 并尝试在其上应用工具提示;它对我有用:
<Tooltip title="delete" placement="start-top">
<div>
<AiOutlineDelete style={{ fontSize: '30px', alignSelf: 'center' }}/>
</div>
</Tooltip>
推荐阅读
- swift - PEM 公共文件转换为字符串 [Swift]
- css - 嘿,我不知道在这种情况下如何使用 ::after 。CSS
- grails - Grails 包绕过证书
- flutter - 我如何使用 runZoned 知道错误来自哪个页面?
- java - 我无法遍历父窗口到子窗口
- c - 在块内获取全局变量时,“extern”会做什么?(使用相同名称定义的不同变量)
- python - 如何将列中的所有日期转换为行系列而不干扰其下方的行
- c# - 查找引发我的 itemcheck 的 listview 事件
- css - CSS 跨浏览器动画技巧(液体/粘糊糊的复选框动画)
- amazon-s3 - 流水线 CI/CD 操作仅对更改的文件