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

Question

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

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

    <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
    classes={{
         paper: classNames(classes.drawerPaper)
         }}>
.......
</Drawer>