如何在react-grid-layout中渲染自定义占位符

Question

有没有办法在react-grid-layout中渲染自定义占位符(红色项)？

例如，我想在这个红色的占位符中呈现一些<img src...>。

我在官方文档(https://github.com/react-grid-layout/react-grid-layout)中没有找到任何关于这方面的信息。

有什么建议吗？

​

​

Answer 1

可以使用css类.react-grid-placeholder.覆盖占位符。这是您导入的css样式的一部分。因此，导入样式的位置：

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

import './yourstyles.css';

在yourstyles.css中，您可以使用图像作为背景，如下所示：

.react-grid-item.react-grid-placeholder {
    background-color: background-image: url("imageURL")
  }