Javascript 在jss中将导入的材质图标设置为背景

我有一个React-mui可拖动对话框组件，我正在其上使用可调整大小的对话框

const styles = theme => ({
  resizable: {
    position: "relative",
    "& .react-resizable-handle": {
      position: "absolute",
      width: 20,
      height: 20,
      bottom: 0,
      right: 0,
      background:
        "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
      "background-position": "bottom right",
      padding: "0 3px 3px 0",
      "background-repeat": "no-repeat",
      "background-origin": "content-box",
      "box-sizing": "border-box",
      cursor: "se-resize"
    }
  }
});

return (
    <StyledDialog
      open={open}
      classes={{root: classes.dialog, paper: classes.paper}}
      PaperComponent={PaperComponent}
      aria-labelledby="draggable-dialog"
    >
      <ResizableBox
        height={520}
        width={370}
        minConstraints={[300, 500]}
        maxConstraints={[Infinity, Infinity]}
        className={classes.resizable}
      >
        <DialogContent classes={{root: classes.dialogContent}} id="draggable-dialog">
          <IconButton className={classes.clearIcon} aria-label="Clear" onClick={onClose}>
            <ClearIcon/>
          </IconButton>
          <iframe
            src={hjelpemiddel.url}
            title={hjelpemiddel.navn}
            width="100%"
            height="500px">
          </iframe>
        </DialogContent>
      </ResizableBox>
    </StyledDialog>
  );
}

---

材质UI正在使用SVG进行缩放贴图。我要做的是将SVG转换为base64，然后将其应用于后台url

这是它的base64输出：

PHN2ZYBJBGFZCZ0ITXVPU3ZNSWnVBI1YB290IIBMB2N1C2FibGu9imzHnliBwXuCz0Iahr0CDOVL3DY53MY5VCMCVMJAWMC9ZDMCIIHZPZXDCB3G9IjagmcyCy1Jpys1OwKwWuId4c0c0c0c8c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0c0TMS40MI0xLJQYTduumyaxNY4ZIDMGMTV2NMG2EM0xMI02BC0YLJMGMI4ZLTIUODCTMI44OS0xLJQYIdeundigmi44OSAYLJG3TDE1DIXADZ2LTZ6IJ48L3BHDGG+PC9zdmc+

在使用材质UI时，我通常使用

makeStyles

覆盖CSS

const useStyles = makeStyles({
  resizable: {
    position: "relative",
    "& .react-resizable-handle": {
      position: "absolute",
      width: 20,
      height: 20,
      bottom: 0,
      right: 0,
      background:
        "url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+')",
      "background-position": "bottom right",
      padding: "0 3px 3px 0",
      "background-repeat": "no-repeat",
      "background-origin": "content-box",
      "box-sizing": "border-box",
      cursor: "se-resize"
    }
  }
});

<ResizableBox
  className={classes.resizable}
>

const useStyles=makeStyles({
可调整大小：{
职位：“相对”，
“&.react可调整大小的句柄”：{
位置：“绝对”，
宽度：20，
身高：20，
底部：0，
右:0,，
背景：
“网址（'data:image/svg+xml；base64，PHN2ZYBJBGFZC00ITXVPU3ZNSWNVBI1YB290IIBMB2N1C2FibGU9IMZHBHNLIB4BWXUCZ0IAHR0DOVL3DY53MY5VCMCVMJAWMC9ZDMCIIHZPZXDCB3G9IJJAGMCAYNCAYNCIXJPYS1AWRKZW49InWuIID48CGF0ACBKPSMTUGMI4WYLJMI4ZLZLZLZLZLYUKUYUKGMI4ZLZYZYYKZYZYZYZYK4GMI2GMIZYZYZYZYZYYN4GMIZYZYL4L4GMIZYKZYZYZYL4GMIZYL4GMIZYKZYZYZYYI4ZltiumyJG5LTIuODCTMS40MI0xLJQYTDuumyaxNy4ZidMgmtV2NMG2EM0xMI02BC0YLJMGMI4ZltiumyJG5LTIuODCTMI44OS0xLJQYIdeuduendigmi44OSAylJG3TDE1DIXADZ2LTZ6IJ48L3BHDGG+PC9zdmc+”，
“背景位置”：“右下角”，
填充：“0 3px 3px 0”，
“背景重复”：“不重复”，
“背景来源”：“内容框”，
“框大小”：“边框框”，
光标：“se调整大小”
}
}
});

---

我的回答有用吗？

const useStyles = makeStyles({
  resizable: {
    position: "relative",
    "& .react-resizable-handle": {
      position: "absolute",
      width: 20,
      height: 20,
      bottom: 0,
      right: 0,
      background:
        "url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+')",
      "background-position": "bottom right",
      padding: "0 3px 3px 0",
      "background-repeat": "no-repeat",
      "background-origin": "content-box",
      "box-sizing": "border-box",
      cursor: "se-resize"
    }
  }
});

<ResizableBox
  className={classes.resizable}
>