SVG作为React Material UI中的伪背景图像

Question

我将React Material UI与JSS一起使用。我有以下结构：

<footer>
  <div className={classes.ContainerWrapper}>
    <div className={classes.Container}>
      <div>
        <div className={classes.Text}>Text</div>
      </div>
      <Box marginLeft={6} className={classes.ButtonContainer}>
        <Button className={classes.Button} variant="contained">
          <Link to={...}>Link text</Link>
        </Button>
      </Box>
    </div>
  </div>
</footer>

问题是，与ContainerWrapper相比，我希望SVG处于绝对位置，部分在之后。到目前为止，我的尝试是：

• 使用z-index（由于绝对位置而无效）
• 使用负Z索引（这无效，因为整个页脚不能具有负Z索引，而是具有可点击的元素）
• 将SVG放在：after伪元素中作为背景图像。

当我尝试最后一个时，遇到了以下障碍：

• 此导入将引发错误： import image from '../../assets/images/image.svg';与png，btw完美配合。
• 最后，我尝试如下使用嵌入式SVG： backgroundImage: `url("data:image/svg+xml,%3Csvg...")`

after伪部分以适当的大小出现在DOM中。但是，我看不到图像。

谢谢！