使用JSX内联样式调用CSS滤镜函数时触发ReferenceError错误

错误原因很直接：在JSX的style对象中，直接写sepia(0.5)时，JavaScript会把sepia识别为一个未定义的变量，而非CSS函数。要在JSX内正确使用CSS滤镜函数，需要把它作为字符串值传入。

基础修复方案 #

把filter的值用单引号或双引号包裹，让它成为合法的字符串：

<button 
  style={{ filter: 'sepia(0.5)' }}>
  Show results
</button>

动态修改样式的方案 #

如果需要动态调整sepia的强度（比如根据状态变化），可以用ES6模板字符串拼接变量：

// 示例：用React状态控制滤镜强度
import { useState } from 'react';

function ResultsButton() {
  const [sepiaIntensity, setSepiaIntensity] = useState(0.5);

  return (
    <button 
      style={{ filter: `sepia(${sepiaIntensity})` }}
      onClick={() => {
        // 点击切换强度，限制在0-1之间
        setSepiaIntensity(prev => prev >= 1 ? 0 : prev + 0.2);
      }}>
      Show results
    </button>
  );
}

这样就能在JSX内直接通过变量动态修改sepia滤镜的参数，不需要单独的CSS文件。

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