在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';

解决方法

材料UI将SVG用于ZoomOutMapIcon。我要做的是将SVG转换为base64，然后将其应用于background-url

这是它的base64输出：PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+

，在使用Material 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}
>