时间戳

首页 > 解决方案 > 使用带有 Drawer 组件的 Material-UI Box 组件

reactjs - 使用带有 Drawer 组件的 Material-UI Box 组件

问题描述

Material-UI Box 组件允许我们引用其他组件，如下所示：

import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

const NewButton = ({ children }) => (
  <Box compoment={Button} px={3} py={1} color="white" bgcolor="primary.dark">
    {children}
  </Box>
)

这就像我想要的那样工作。但是，现在让我尝试使用 Drawer 组件：

import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";

const NewDrawer = ({ children, open }) => {
  return (
    <Box component={Drawer} width="300px" bgcolor="secondary.dark">
      {children}
    </Box>
  )
}

这不起作用。

知道为什么不以及如何让它工作吗？

谢谢。

标签： reactjsmaterial-ui

解决方案

根据 Material UI 文档，对于Drawer组件，我们必须将openprop 传递为true.

并且还需要像下面这样传递抽屉内容，

<Drawer open={true}>{renderContents()}</Drawer>

在 Box 组件api中，我们可以将组件数据作为“函数”传递。像下面的例子。

import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";

const NewDrawer = ({ children, open }) => {
  return (
    <Box component={() => {
      return <Drawer open={true}>{renderContents()}</Drawer>
    }} width="300px" bgcolor="secondary.dark">
      {children}
    </Box>
  )
}

请参阅我的代码沙箱示例。

推荐阅读