将Material-UI Box组件与抽屉组件一起使用 [英] Using Material-UI Box Component with the Drawer Compoment

问题描述

材质UI框组件允许我们引用其他组件，如下所示:

The Material-UI Box component allows us to reference other components as follows:

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组件尝试一下:

This works just as I want it to. However, let me now try it with the Drawer component:

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>
  )
}

这不有效.

有人知道为什么不这样做以及如何使它工作吗?

Any idea why not and how I can get it to work?

谢谢.

推荐答案

根据Material UI文档，对于

As per Material UI doc, For the Drawer component, we have to pass the open prop as true.

还需要像下面那样传递抽屉内容，

And also need to pass the drawer content like below,

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

收件箱组件 api ，我们可以将组件数据作为函数"传递.像下面的例子一样.

In Box component api, we can pass the component data as a 'function'. like the below example.

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>
  )
}

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

这篇关于将Material-UI Box组件与抽屉组件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！