除了简单的dropZoneText和图标 prop 外,我想自定义DropZoneArea的外观。我已经成功地完成了,但是我得到了下面的react警告Failed prop type: Invalid prop 'dropzoneText' of type 'object' supplied to 'DropzoneAreaBase', expected string
。
我知道问题是什么,但我想知道是否有人知道如何准确地定制它。
默认值如下所示:
我想要以下内容:
我可以通过重写dropZoneText属性使其工作,如下所示:
<DropzoneArea
filesLimit={1}
showAlerts={false}
classes={{ root: clsx([classes.dropZoneRoot, uploading ? classes.disableClick : null]) }}
showPreviewsInDropzone={false}
showFileNames={false}
dropzoneClass={classes.dropZone}
Icon={''}
dropzoneText={
<Box className={classes.customDropZone} px={16} py={6} display="flex" flexDirection="column" justifyContent="center" alignItems="center" gridGap={4}>
{uploading && (
<Box className={classes.customDropZoneLoader} display="flex" flexDirection="column" justifyContent="center" alignItems="center">
<CircularProgress size="2rem" />
</Box>
)}
<Typography variant="subtitle1">Drop your file here</Typography>
<Typography>or</Typography>
<Box mt={1}>
<Button color="primary" variant="outlined" style={{ width: 125 }}>
Select File
</Button>
</Box>
<Box mt={1}>
<Typography>
Accepted file types: <br />
<strong>.png, .jpg, .gif, .txt, .csv, .doc, .docx, .xls, .xlsx, .pdf</strong>
</Typography>
</Box>
<Box mt={1}>
<Typography>
Maximum file size: <strong>20MB</strong>
</Typography>
</Box>
</Box>
}
maxFileSize={20971520}
acceptedFiles={[
'application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png, application/txt, text/tab-separated-values, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'
]}
onChange={onFileDropped}
onDropRejected={onFileRejected}
>
</DropzoneArea>
有没有人知道一个更好的方法来做到这一点,而不是得到警告?无论它的价值,它的工作完美的罚款,但只是抛出警告在控制台。
1条答案
按热度按时间rqqzpn5f1#
不幸的是,似乎该仓库的维护者没有能力修复它。https://github.com/Yuvaleros/material-ui-dropzone/issues/35-这是一个相当旧的仓库,所以我怀疑它是否会得到修复。
如果您使用的是Typescript,则可以将 Package 器强制转换为字符串以使
DropzoneArea
组件满意,但问题在于库本身没有将object / ReactNode用作预期类型。如果您真的想尝试修复这个问题,可以使用
patch-package
这样的npm包为您的项目在本地修复它。https://www.npmjs.com/package/patch-package