Material-UI styled components报错：严格模式仅支持'\0'数字转义

在styled-components中设置伪元素content时，使用\201c这类数字转义字符会触发严格模式下的转义报错，核心问题是JavaScript与CSS的转义规则不兼容：

报错原因 #

JavaScript严格模式仅允许\0作为合法的数字转义序列，其他形式的数字/八进制转义（如\201c）会被判定为非法。你写的\201c会被JS尝试解析为无效的八进制转义，从而抛出错误。

三种可行解决方案 #

• 方案1：使用JavaScript Unicode转义序列
  用\u开头的四位十六进制转义格式，让JS正确解析目标字符：

  export const Title = styled(Typography)(({ theme }) => ({
    color: "black",
    "&:before": {
      content: "\u201c",
    },
  }));
  

• 方案2：转义反斜杠让CSS处理转义
  在JS字符串中用\\转义反斜杠，将原始转义符传递给CSS后由CSS解析：

  export const Title = styled(Typography)(({ theme }) => ({
    color: "black",
    "&:before": {
      content: "\\201c",
    },
  }));
  

• 方案3：直接写入目标字符
  直接使用左双引号“，无需转义，代码可读性更高：

  export const Title = styled(Typography)(({ theme }) => ({
    color: "black",
    "&:before": {
      content: "“",
    },
  }));
  

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