React中如何将MUI图标添加到伪元素(::after,::before)的content中？

CSS伪元素的content属性仅支持文本、Unicode字符或资源URL，无法直接插入React组件（比如你导入的ArrowLeftIcon），因此需要换以下几种思路实现：

方案1：使用图标对应的Unicode字符（适用于Material Icons字体） #

先找到ArrowLeftIcon对应的Unicode编码（Material Icons中为\e5c4），然后设置伪元素的字体为Material Icons，直接在content中使用该编码：

import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";

sx={{
  "&.Mui-selected::before": {
    fontFamily: '"Material Icons"',
    content: '"\\e5c4"', // 注意转义反斜杠
    marginRight: 1,
    color: 'inherit',
    fontSize: '1.2rem'
  },
}}

方案2：用组件条件渲染替代伪元素（推荐，更符合React逻辑） #

既然伪元素无法直接渲染React组件，不如在目标组件内部根据选中状态直接渲染ArrowLeftIcon，这种方式更灵活易维护：

import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
import MenuItem from "@mui/material/MenuItem";

// 假设目标组件是MenuItem，根据selected状态控制图标显示
<MenuItem selected={isSelected} sx={{ ...你的其他样式 }}>
  {isSelected && <ArrowLeftIcon sx={{ marginRight: 1 }} />}
  你的组件文本内容
</MenuItem>

方案3：将图标转为Data URI作为伪元素背景（必须用伪元素时使用） #

把ArrowLeftIcon的SVG代码转换为Data URI，设置为伪元素的背景图，以此实现图标展示：

sx={{
  "&.Mui-selected::before": {
    content: '""',
    display: 'inline-block',
    width: '20px',
    height: '20px',
    backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42s-1.03-.39-1.42 0l-6.59 6.59c-.39.39-.39 1.03 0 1.42l6.59 6.59c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z%22/%3E%3C/svg%3E")',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    marginRight: 1
  },
}}

内容的提问来源于stack exchange，提问作者Lana Hanna