Styled Components设置pointer-events:none无效，原生CSS正常，求原因

你的Styled Components代码存在两处CSS语法错误，直接导致样式解析异常，这是pointer-events: none失效的核心原因：

• 属性值错误添加双引号：transform: "translate(-50%, -50%)"里的双引号是多余的，CSS属性值不需要引号，这个错误会让transform属性失效，同时打乱后续样式的解析逻辑。
• 属性声明未加分号：transform、pointer-events等属性末尾都缺少分号，CSS语法要求每个声明必须以分号结尾，否则解析器会中断，后续属性无法被正确识别。

修正后的代码如下：

const SpanStyle = styled.span`
  position: absolute;
  top: 49%;
  left: 37%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  cursor: none;
`;

如果修正后问题仍存在，检查是否有其他更高优先级的样式（比如行内样式、权重更高的类选择器）覆盖了pointer-events属性。

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