在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>
  );
}

我想使用自己的图标，而不是用于ResizableBox的默认图像。如何将要从材质图标导入的图标设置为可调整大小的背景？

import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）