css - 如何设置 Material UI DropzoneArea Preview 项的大小
问题描述
我正在尝试自定义一点我的 MUI DropzoneArea 但我无法解决问题。正如您在图片中看到的,预览网格由三个元素组成:容器(红色)项目(蓝色)和图像。我设法为这些元素设置了一些自定义背景值,但我希望看起来像填充/边距的项目(蓝色方块)更小,并且其中的图像更大。我尝试为项目和图像设置边距、填充、宽度、高度,但没有任何反应。我究竟做错了什么?提前致谢。
我的代码:
<div className={classes.mainClass}>
<DropzoneArea
acceptedFiles={['image/*']}
onChange={handleChange}
showFileNames
dropzoneText="Upload your images please"
showAlerts={true}
filesLimit={6}
dropzoneClass={classes.myDropZone}
showFileNamesInPreview = {true}
previewGridClasses = {{container:classes.test1,
item: classes.test2,
image: classes.test3}}
/>
</div>
export default makeStyles((theme) => ({
myDropZone: {
position: 'relative',
width: '50%',
height: '100%',
// minHeight: '400px',
// backgroundColor: '#F0F0F0',
// border: 'dashed',
// borderColor: '#C8C8C8',
// cursor: 'pointer',
// boxSizing: 'border-box',
},
test1:{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'#FF0000',
justifyContent:'center',
},
test2:{
backgroundColor:'#23C5CA',
objectFit:'cover',
width:'50%',
height:'10%'
},
test3: {
objectFit:'cover',
color:'#A2CA23',
backgroundColor:'#A2CA23',
padding:'0px',
margin:'0px',
border:'0px',
}
}))
```
解决方案
您可以使用
<DropzoneArea
dropzoneClass={classes.dropZone} // for drop zone container style your height... here
dropzoneParagraphClass={classes.dropZoneText} // for the paragraph style
previewGridClasses={{
item: classes.preview,
}}
...
/>
推荐阅读
- reactjs - Redux 业务逻辑最佳实践
- amazon-web-services - 在 AWS Athena 中创建外部表时出错
- java - OptimisticLockType.DIRTY 无法按预期工作的问题
- javascript - 如何调用 Flask Python 函数并使用 NestJS 使用它
- python - 将数据帧转换为时间序列
- visual-studio - 如何让我的 .Net5 项目使用特定的运行时?
- c++ - 传递一个铸造类型
- python-3.x - 记录到 .log 文件不起作用。它什么也不写。为什么?
- r - 计算表达研究参与者概率估计的两个部分之间“距离”的最佳方法
- integer - 使用 z3 的模运算