首页 > 解决方案 > 通过单击并拖动角来调整材质 ui 卡片组件的大小

问题描述

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

提前感谢您的帮助。

标签: reactjsmaterial-uiresizablereact-dndreact-beautiful-dnd

解决方案


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


推荐阅读