通过单击并拖动角来调整材质 ui 卡片组件的大小答案

【问题标题】：Resizing a material ui card component by click and dragging a corner通过单击并拖动角来调整材质 ui 卡片组件的大小
【发布时间】：2020-02-28 19:46:16
【问题描述】：

我有一个 react-beautiful-dnd 列表中的材料 ui 卡列表。我希望能够将卡片从一个列表移动到另一个列表并重新组织它们（这已经完成）。例如，我还希望能够单击卡片的右下角并根据需要调整其大小。那可能吗？如果是这样，怎么做？我尝试将卡片包装在 react-grid-layout 对象之类的东西中，但没有成功，而我的 react 应用程序仍然出现，卡片没有呈现。

提前感谢您的帮助。

【问题讨论】：

标签： reactjs material-ui resizable react-dnd react-beautiful-dnd

【解决方案1】：

我找到了一个简单的解决方案，并认为我会分享。我需要做的就是将每个材质 UI Card 从 react-resizable 包装到 ResizableBox 中。然后在那之后，卡片的尺寸将遵循 ResizableBox 的尺寸，我使用材质 UI makeStyles 将 100% 的宽度和高度应用于卡片。就是这样。

【讨论】：