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

【问题标题】：How to add background image in material-ui drawer component如何在material-ui抽屉组件中添加背景图片
【发布时间】：2021-10-12 09:08:58
【问题描述】：

这两种方法我都试过了，都不管用。

方法一：直接改变Drawer组件。

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

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

请为您的抽屉样式类添加背景图片网址

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

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

    },
})

抽屉组件示例

<Drawer classesName={classes.drawerPaper} />

【讨论】：

【解决方案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>

【讨论】：