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

Question

我已经尝试过这两种方法，但都不起作用。

方法一：直接更换Drawer组件。

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

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

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

Answer 1

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

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

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

    },
})

抽屉组件样品

<Drawer classesName={classes.drawerPaper} />