React自定义组件传递style参数触发CSSStyleDeclaration报错

该报错由两处写法错误共同导致：

• 组件调用阶段style传参格式非法：React的style属性要求接收标准JavaScript对象，原生div正常工作的写法style={{'--ratio':1/2}}中，外层大括号是JSX语法标记，代表括号内是JS表达式，内层大括号才是真正的样式对象。错误调用代码style={'--ratio':16/9}只写了一层大括号，传入的不是合法对象结构。
• 组件内部样式处理逻辑错误：FadeAnimation中给motion.div配置的style={{${style}}}会将传入的参数强制转换为字符串，最终生成{ "[object Object]": undefined }的非法结构。React尝试将该非法结构赋值给DOM的CSSStyleDeclaration接口时，无法识别对应的属性索引，就会抛出索引属性setter不支持的错误。

1. 修正组件调用时的style传参格式，和原生div写法保持一致，传入合法的样式对象：

<FadeAnimation name={'project-image--image'} style={{'--ratio': 16/9}} />

2. 修正组件内部motion.div的style属性配置，直接透传传入的style对象即可，无需额外包裹模板字符串或多余对象结构：

// animation.js 中FadeAnimation组件返回部分修正后代码
return (
  <motion.div 
    className={name}
    style={style}
    ref={ref}
    animate={controls}
    initial="hidden"
    transition={{ duration: duration, delay: delay }}
    variants={{
      visible: { opacity: 1, y: 0 },
      hidden: { opacity: 0, y: 5 }
    }}
  >
    {children}
  </motion.div>
)

拓展说明：如果需要给组件内置默认样式，可以通过对象展开运算符合并内置样式和传入样式，例如style={{ margin: 0, ...style }}，禁止使用模板字符串转译style对象。

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