将Material-UI Box组件与抽屉组件一起使用

问题描述

材质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文档，对于抽屉组件，我们必须将 open 道具传递为 true .

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组件与抽屉组件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！