如何使用material-ui-dropzone更改每个文件的图标或图标颜色

Question

我正在使用material-ui-dropzone上传多个文件。

有没有办法改变每个文件的图标或图标的颜色？

请给我解决这个问题的建议。

目前的情况-

​

代码示例- Link

Answer 1

首先，如果您在documentation https://react-dropzone.js.org/#section-previews中看到了示例

不使用缩略图，而是使用material UI中的图标，并以编程方式更新颜色。

创建以编程方式返回RGB的调色板或函数。然后，在挂载基于文件编号的图标组件时，为每个图标分配颜色。

对于简单的数组，只需创建一个带有颜色值的数组：

const colorPallet = ['red', 'yello', 'green', ... ]

并在style <FileClipIcon style={{ color: colorPallet[index] }} />中指定颜色

否则，编写一个函数，返回0到255之间的随机RGB值并使用它。