重现步骤
步骤：
import { DialogActions, DialogContent, Modal, ModalClose, ModalDialog, Typography, } from '@mui/joy';- 将鼠标悬停或点击ModalClose的X。
Video.sem.titulo.Feito.com.o.Clipchamp.mp4
当前行为
当您将鼠标悬停或点击其默认svg子元素之外时，<ModalClose />可以正常工作。
预期行为
它应该在聚焦按钮或按钮内的svg时可以悬停或点击。
上下文
mui/joy默认的ModalClose
您的环境
npx @mui/envinfo
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (122.0.2365.52)
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.10
@mui/core-downloads-tracker: 5.14.4
@mui/envinfo: ^2.0.18 => 2.0.18
@mui/icons-material: ^5.14.3 => 5.14.3
@mui/joy: 5.0.0-beta.29 => 5.0.0-beta.29
@mui/lab: ^5.0.0-alpha.139 => 5.0.0-alpha.139
@mui/material: ^5.14.4 => 5.14.4
@mui/private-theming: 5.14.4
@mui/styled-engine: 5.13.2
@mui/styles: ^5.14.4 => 5.14.4
@mui/system: 5.14.4
@mui/types: 7.2.4
@mui/utils: 5.14.4
@mui/x-date-pickers: ^6.11.0 => 6.11.0
@types/react: ^17.0.0 => 17.0.64
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
styled-components: ^5.1.1 => 5.3.11
typescript: ^5.1.6 => 5.1.6搜索关键词:模态
4条答案
按热度按时间r6hnlfcb1#
嘿，@GuilhermeMaier,感谢你打开这个问题！你能提供一个可复现的CodeSandbox,里面有一段类似于你的应用程序的易于调试的代码吗？另外，你是使用自定义图标吗？文档中的例子似乎在这个问题上运行正常。
vqlkdk9b2#
感谢danilo-leal的快速回复。以下是带有错误的简单CodeSandbox,如果无法访问，请告诉我！
https://codesandbox.io/p/sandbox/material-ui-feat-joy-ui-forked-dvphmp
实际上，我不知道如何正确共享此链接，如果我点击它，什么都没有找到，我被重定向到一个GitHub页面，但是如果你复制链接并在浏览器中打开，它将起作用。
2ul0zpep3#
嘿，@GuilhermeMaier,我找到了解决你问题的方法，但我认为这不是一个大问题。主要问题是
<DialogContent>组件。如果你从你的CodeSandbox中删除它，它应该按预期工作！🙌🏼如果你需要任何其他帮助，请告诉我。v9tzhpje4#
嘿，@GuilhermeMaier,我找到了解决你问题的方法，但我认为这不是一个大问题。主要问题是
<DialogContent>组件。如果你从你的CodeSandbox中移除它，它应该按预期工作！🙌🏼如果你需要任何其他帮助，请告诉我。尽管你的提示有效，我会使用它，但我会保留这个问题，因为我认为我的结构遵循了joy文档，正如这里所说https://mui.com/joy-ui/react-modal/#modal-dialog。