如何在MUI styled中为::after伪元素动态传递content属性值

你之前的写法无法生效，核心问题是模板字符串使用方式错误，同时误用了HTML转义字符"（CSS中不识别该字符，需用原生引号）。

错误原因 #

你写的content: '"${amount}"'是将整个内容作为普通字符串，其中的${amount}不会被解析为变量；而且"在CSS中不是有效引号，导致伪元素显示的是字面量${amount}而非变量值。

正确写法 #

使用JavaScript模板字符串动态插入变量，同时用CSS原生引号（单引号或转义后的双引号）包裹内容：

const StyledBox = styled(Stack)<{ amount?: number }>(({ amount = 1000 }) => ({
  
    '& .chart-label': {
        '&::after': {
            // 用单引号包裹变量值，模板字符串自动解析amount
            content: `'${amount}'`,
            position: 'absolute',
            top: '50%',
            left: '65%',
            transform: 'translate(-50%, -50%)'
        }
    }
}));

如果需要处理amount可能为undefined或null的情况，可添加默认兜底：

content: `'${amount ?? 0}'`,

补充说明 #

• CSS的content属性要求字符串必须被引号包裹，所以在JS模板字符串中要生成带引号的内容。
• 也可以用转义双引号的写法：content: \"${amount}"``，效果和单引号一致。

内容的提问来源于stack exchange，提问作者Syed Noohu