如何为整个抽屉设置背景图片而不是canvasColor？

import React from 'react';
import Drawer from '@material-ui/core/Drawer';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  drawer: {
    width: 240,
    flexShrink: 0,
    backgroundColor: 'transparent', // 设置背景颜色为透明
  },
  drawerPaper: {
    width: 240,
    backgroundImage: `url('你的图片URL')`, // 设置背景图片
    backgroundSize: 'cover', // 图片大小适应
    backgroundRepeat: 'no-repeat', // 不重复显示
    backgroundPosition: 'center', // 图片位置居中
  },
}));

function MyDrawer() {
  const classes = useStyles();

  return (
    <Drawer
      className={classes.drawer}
      variant="permanent"
      classes={{
        paper: classes.drawerPaper,
      }}
    >
      {/* 抽屉内容 */}
    </Drawer>
  );
}

export default MyDrawer;

<template>
  <v-navigation-drawer app permanent>
    <v-list-item>
      <!-- 抽屉内容 -->
    </v-list-item>
  </v-navigation-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawer: true,
    };
  },
};
</script>

<style scoped>
.theme--light.v-navigation-drawer {
  background-image: url('你的图片URL'); /* 设置背景图片 */
  background-size: cover; /* 图片大小适应 */
  background-repeat: no-repeat; /* 不重复显示 */
  background-position: center; /* 图片位置居中 */
}
</style>

<div class="drawer">
  <!-- 抽屉内容 -->
</div>

.drawer {
  width: 240px;
  background-image: url('你的图片URL'); /* 设置背景图片 */
  background-size: cover; /* 图片大小适应 */
  background-repeat: no-repeat; /* 不重复显示 */
  background-position: center; /* 图片位置居中 */
}