使用 Chakra-UI 抽屉组件推送内容

【问题标题】：Pushing Content with Chakra-UI Drawer Component使用 Chakra-UI 抽屉组件推送内容
【发布时间】：2021-12-02 15:21:49
【问题描述】：

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

1.不要使用抽屉。

2.而不是抽屉创建一个名为自定义抽屉的组件（您可以命名enter code hereany），其中包含您需要的东西

在自定义 Drawer 中为父元素编写一些 css 类名如下，类名将通过 Props 接受

.displayNone{
    display:none
}

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

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

我。

<customeDrawer class="displayNone"><customeDrawer>

二。

<customeDrawer class="displayBlock"><customeDrawer>

希望它会使用完整

【讨论】：