如何在material-ui抽屉组件中添加背景图像

Question

我尝试了这两种方法，但都没有起作用。

方法一：直接更改抽屉组件。

    <Drawer
      style={{backgroundImage: url('../../public/images/sideList.jpg')}}>
      <div>
        <SideList/>
      </div>
    </Drawer>

方法二：为嵌套的 div 添加 background-image 属性。

    <Drawer>
      <BackgroundImageDiv>
        <SideList/>
      </BackgroundImageDiv>
    </Drawer>

- ccd

Answer 1

请为抽屉样式类添加背景图片url。

import drawerImage from "../../resources/images/drawer.jpg";

const styles = theme => ({
    drawerPaper: {
      backgroundImage: `url(${drawerPaper})`

    },
})

抽屉组件示例

<Drawer classesName={classes.drawerPaper} />

- Udith Chandrarathna

---

小修正，应该是 backgroundImage: `url(${drawerImage})` 而不是 drawerPaper。 - Benjamin Luo

Answer 2

在 MUI 5.0+ 中，您可以使用以下方法实现：

带有黑色不透明度背景图像的导航抽屉示例，类似于 this。

<Drawer
                    variant="permanent"
                    sx={ {
                        display: { xs: 'none', sm: 'block' },
                        '& .MuiDrawer-paper': {
                            boxSizing: 'border-box',
                            width: DRAWER_WIDTH,
                            backgroundImage: 'url(/img/meteorImpact.jpg)',
                            position: 'absolute',
                            backgroundSize: 'cover',
                            backgroundPosition: 'center center',
                            '&:before': {
                                position: 'absolute',
                                width: '100%',
                                height: '100%',
                                content: '""',
                                display: 'block',
                                background: '#000',
                                opacity: '0.6'
                            }
                        }
                    } }
                    open
                >
                    { brand }
                    { drawerItems }
                </Drawer>

- Ivan Cabrera