如何在Emotion styled的background-image属性中使用MUI图标组件

问题原因 #

ArrowForwardIcon是React组件实例，并非图片资源的URL路径，而background-image的url()参数要求传入可访问的图片资源地址、base64编码或SVG字符串，因此原生写法无法生效。

解决方案 #

方案1：硬编码SVG转data URL（适合固定样式的图标场景） #

直接提取MUI对应图标的SVG源码，转码为data URL后传入CSS：

import styled from '@emotion/styled'

// 注意fill属性的#要转义为%23避免解析异常
const arrowForwardSvg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" fill="%23333"/></svg>`

const DivStyled = styled('div')`
  width: 100px;
  height: 100px;
  background-image: url(${arrowForwardSvg});
  background-repeat: no-repeat;
  background-position: center;
`

方案2：子元素定位模拟背景图（最灵活，推荐使用） #

将MUI图标作为容器子元素，通过定位实现背景效果，可完美继承MUI主题配置、动态修改样式：

import styled from '@emotion/styled'
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';

const DivStyled = styled('div')`
  position: relative;
  width: 100px;
  height: 100px;
  /* 容器原有样式 */

  .bg-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0.3; /* 自定义透明度 */
    pointer-events: none; /* 避免遮挡容器交互 */
    font-size: 40px; /* 控制图标尺寸 */
    color: #999; /* 控制图标颜色 */
  }
`

function MyComponent() {
  return (
    <DivStyled>
      <ArrowForwardIcon className="bg-icon" />
      {/* 容器内其他内容 */}
    </DivStyled>
  )
}

方案3：动态渲染组件转字符串（适合需要动态生成图标样式的场景） #

通过renderToStaticMarkup将React图标组件转为HTML字符串，再编码为data URL传入CSS：

import styled from '@emotion/styled'
import { renderToStaticMarkup } from 'react-dom/server'
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';

// 动态生成图标data URL，可直接传入MUI图标组件的props控制样式
const arrowForwardUrl = `data:image/svg+xml;utf8,${encodeURIComponent(renderToStaticMarkup(<ArrowForwardIcon htmlColor="#333" fontSize="large" />))}`

const DivStyled = styled('div')`
  width: 100px;
  height: 100px;
  background-image: url(${arrowForwardUrl});
  background-repeat: no-repeat;
  background-position: center;
`

内容的提问来源于stack exchange，提问作者Jason Y