使用 Chakra-UI Drawer 组件推送内容

问题描述

我正在学习如何使用 Chakra-UI 抽屉组件：https://chakra-ui.com/docs/overlay/drawer。它基本上完成了我想要它做的所有事情，只有一个例外——它涵盖了内容而不是将其推到一边。我想要的是一个右侧抽屉，当它打开时会将内容推到左侧。

Chakra-UI Drawer 组件可以做到这一点吗？如果是这样，我该怎么做？

谢谢。

解决方法

我不确定这个解决方案，但你可以试试这个

1.不要使用抽屉。

2.代替抽屉创建一个名为自定义抽屉的组件（您可以命名enter code here任何），其中包含您需要的东西

在自定义 Drawer 中为父元素类名编写一些 css 如下，类名将被道具接受

.displayNone{
display:none
}

.displayNone{
display:block;
position:absolute;
top:0px;
left:0px;
width:400px
overflowX:scroll
}

3.现在通过条件渲染组件，您必须传递以下组件

我。 二、

希望它会用满