fix: add global style for LightBox to prevent image overlay issues (#6651)

This commit is contained in:
Zeke Zhang 2025-04-13 14:05:24 +08:00 committed by GitHub
parent 4bc16e52f2
commit c9b1c893e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -11,6 +11,7 @@ import { DeleteOutlined, DownloadOutlined, InboxOutlined, LoadingOutlined, PlusO
import { Field } from '@formily/core';
import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
import { Alert, Upload as AntdUpload, Button, Modal, Progress, Space, Tooltip } from 'antd';
import { createGlobalStyle } from 'antd-style';
import useUploadStyle from 'antd/es/upload/style';
import cls from 'classnames';
import { saveAs } from 'file-saver';
@ -36,6 +37,12 @@ import {
import { useStyles } from './style';
import type { ComposedUpload, DraggerProps, DraggerV2Props, UploadProps } from './type';
const LightBoxGlobalStyle = createGlobalStyle`
.ReactModal__Overlay.ReactModal__Overlay--after-open {
z-index: 3000 !important; // 避免预览图片时被遮挡
}
`;
attachmentFileTypes.add({
match(file) {
return matchMimetype(file, 'image/*');
@ -62,6 +69,8 @@ attachmentFileTypes.add({
[index, list],
);
return (
<>
<LightBoxGlobalStyle />
<LightBox
// discourageDownloads={true}
mainSrc={list[index]?.url}
@ -85,6 +94,7 @@ attachmentFileTypes.add({
</button>,
]}
/>
</>
);
},
});